ESLint 开启及保存自动修改不规范的代码自动格式化

小神龙学前端

已于 2024-04-30 16:34:00 修改

阅读量1.3k

点赞数 3

文章标签： java 前端服务器

于 2024-04-30 16:33:14 首次发布

本文链接：https://blog.csdn.net/weixin_74095707/article/details/138349895

版权

步骤一:

步骤二:

步骤三:

步骤四:

步骤五:

// 当保存的时候 eslint自动修复数据
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit"
    },
// 保存代码，不自动格式化
"editor.formatOnSave": false,

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小神龙学前端

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vscode eslint 快速配置（保存自动格式化）

https://shixuebin.gitee.io/hexo-blog/

11-24

1100

安装就不说了，安装后打开vscode设置，搜索eslint，然后点击setting.json写入如下代码。

插件实现按照 ESLint 规则自动格式化

jiang_ziY的博客

01-26

3818

注意：如果格式化并未按照 ESLint 规则进行，需要将其他所有格式化插件卸载！例如：Beautify、xxxFormatxxx

1 条评论您还未登录，请先登录后发表或查看评论

vue+ESLint 配置保存自动格式化代码

10-15

主要介绍了vue+ESLint 配置保存自动格式化代码的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

vue 学习（3）vscode保存代码，自动按照eslint规范格式化代码设置

chongxie0871的博客

04-19

839

vscode设置 setting.json { "editor.tabSize": 2, "files.associations": { "*.vue": "vue" }, "eslint.autoFixOnSave": ...

Eslint配置-保存时代码自动格式化

qq_40926485的博客

08-11

258

vscode 中使用eslint 保存时代码自动格式化 vscode 设置中搜索找到setting.json 然后添加代码 "eslint.codeAction.showDocumentation": { "enable": true }, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, ...

eslint---开始

weixin_43390711的博客

05-05

506

一、项目中安装eslint包 $ npm install eslint --save-dev 二、生成配置文件 $ ./node_modules/.bin/eslint.cmd --init $ ./node_modules/.bin/eslint --init // npx会到node_module/.bin下去找脚本运行 $ npx eslint --init 三、开始语法检测 $ ./node_modules/.bin/eslint yourfile.js $ npx eslint y

ESLint 自动修正代码配置

m0_51645333的博客

10-23

1319

安装 ESLint 插件，配置自动修复错误代码

ESLint自动格式化代码

qq_42931285的博客

03-07

2276

ESLint自动格式化代码

vue-cli4项目开启eslint保存时自动格式问题

11-20

在这里，我们将详细讨论如何在 Vue CLI 4 项目中开启 ESLint 并实现保存时自动格式化。首先，我们需要在 Visual Studio Code (VSCode) 中安装 ESLint 插件。这可以通过在 VSCode 市场搜索 "ESLint" 并安装插件来...

VScode+ESlint 自动格式化代码(2021)

热门推荐

Superman_peng的博客

02-21

1万+

本文用 Vue 项目做示范，基于项目已有eslint环境。利用 Vue CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。 1、安装插件 ESLint， 2、配置eslint插件 File -> Preference-> Settings（如果装了中文插件包应该是文件 -> 选项 -> 设置），搜索 eslint，点击 Edit in setting.json 将以下选项添加到配置文件 //配置eslint "eslint.val

vscode代码格式化 保存时候自动修改为合规代码

丿灬安之若死

02-14

1488

安装这三个组件 windwos ctrl+,打开设置然后点击右上角这里将一下内容粘贴并保存 { // tab 大小为2个空格 "editor.tabSize": 2, // 100 列后换行 "editor.wordWrapColumn": 100, // 保存时格式化 "editor.formatOnSave": true, // 开启 vscode 文件路径导航 "breadcrumbs.enabled": tr...

vscode保存代码时自动eslint格式化

m0_61783767的博客

10-17

1942

3、会弹出settings.json文件，将以下内容复制进去即可。2、选择远程--->点击右上角打开设置。

vscode vetur eslint保存代码时自动格式化

yhkwings的专栏

10-06

785

vscode编写vue代码使用vetur和eslint保存时自动格式化html和js,并且不冲突

配置Eslint 保存自动格式化

weixin_50636536的博客

03-20

1658

Eslint 是用来统一JavaScript代码风格的工具，不包含css、html等。接下来在项目实战中，使用的是 JavaScript Standard Style 代码风格。具体规则要求： https://standardjs.com/readme-zhcn.html Eslint的校验有两种情况第一种：会在代码保存时进行校验，但是只会在控制台进行提示。-`vue-cli自带` 第二种，使用vscode的插件，可以在编写代码时校验，提示错误，并且自动保存修复错误。通过vscode进行配.

vscode eslint代码保存自动格式化

qq_40895460的博客

06-07

859

【代码】vscode eslint代码保存自动格式化。

vscode配置eslint保存自动格式化

sakurahl的博客

07-17

1005

在 VSCode 中打开项目，打开 VSCode 设置（快捷键 Ctrl + ,）安装 VSCode ESLint 插件。点击右上角，编辑json文件。

使用ESLint来启动和运行—可插接的JavaScript Linter

09-20

900

这篇文章是由同行评审添Severien 。感谢所有SitePoint的审稿作出SitePoint内容也可以是最好的！是否术语“掉毛”听起来很熟悉？这是使用工具来自动检查代码中的潜在问题的过程。还有，你可以使用这样的工具获得几个关键的好处。保持你的代码风格一致。棉短绒允许你检查你的代码风格像间距，缩进和大括号的放置问题。一旦你的团队的编码风格一致，它可以在配置文件中记录，并自动检...

ESLint+Prettier实现保存自动格式化代码

qq_44910894的博客

06-02

1816

Vscode中配置ESLint+Prettier的步骤，从而实现保存自动格式化，自动修复错误等骚操作，方便了开发

eslint- 保存自动格式化

最新发布

04-03

### 如何配置 ESLint 实现保存时自动格式化代码为了使 VSCode 中的 ESLint 插件能够在保存文件时自动格式化代码，可以按照以下方法进行设置： #### 1. 安装必要的扩展确保已安装 `ESLint` 扩展以及可能需要的其他辅助工具（如 Prettier 或 Vetur）。这些工具可以帮助处理不同类型的代码格式化需求。 #### 2. 修改 VSCode 的用户设置通过修改用户的 `settings.json` 文件来启用保存时的自动格式化功能。以下是推荐的配置项及其作用说明： - **启用保存时自动格式化** 设置 `"editor.formatOnSave"` 属性为 `true` 可以让编辑器在每次保存文件时尝试应用默认的格式化程序[^1]。 ```json "editor.formatOnSave": true, ``` - **指定默认格式化工具** 如果项目中有多个格式化工具共存，则可以通过 `"editor.defaultFormatter"` 来定义优先使用的格式化插件。例如，在 Vue 开发环境中通常会使用 Vetur 进行 HTML 和 CSS 格式的管理： ```json "editor.defaultFormatter": "octref.vetur", ``` - **针对特定语言禁用某些格式化行为** 对于 JavaScript 文件，如果不想由 Vetur 负责其格式化逻辑而改交予 ESLint 处理，则需调整如下选项: ```json "vetur.format.defaultFormatter.js": "none" ``` - **激活 ESLint 自动修复功能** 将 `"editor.codeActionsOnSave.source.fixAll.eslint"` 设定为 `"explicit"` 或者简单设成布尔值 `true` 即可触发保存操作中的问题修正过程[^2]： ```json "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } ``` 或者更简洁的方式直接开启全部修复动作而不区分具体来源: ```json "editor.codeActionsOnSave": { "source.fixAll": true } ``` 以上所有配置综合起来能够满足大多数开发者对于前端开发环境下的自动化编码标准维护的需求。 #### 示例完整的 settings.json 配置片段下面提供了一个适用于 Vue 项目的完整例子供参考： ```json { "editor.formatOnSave": true, "editor.defaultFormatter": "octref.vetur", "vetur.format.defaultFormatter.js": "none", "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } } ``` ### 注意事项需要注意的是，当同时存在多种格式化工具有可能导致冲突的情况发生时，合理规划各工具负责范围尤为重要；另外还需确认本地机器上已经正确安装并全局可用的相关 CLI 工具版本与 IDE 内部集成保持一致以免出现兼容性问题。