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

最新推荐文章于 2024-08-15 11:01:12 发布

Missy Peng

最新推荐文章于 2024-08-15 11:01:12 发布

阅读量1.6w

点赞数 26

分类专栏：前端文章标签： vscode eslint 自动格式化 2021

本文链接：https://blog.csdn.net/superman_peng/article/details/113916222

版权

本文介绍了如何在VScode中配置和使用ESLint进行代码自动格式化。首先，通过安装ESLint插件，然后在设置中配置ESLint，启用校验。接着，详细说明了如何实现一键格式化整个项目代码，以及如何忽略特定文件的校验。此外，针对VScode缩进显示问题给出了解决方案。

摘要由CSDN通过智能技术生成

本文用 Vue 项目做示范，基于项目已有eslint环境。
利用 Vue CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。

1、安装插件 ESLint，

在这里插入图片描述

2、配置eslint插件

File -> Preference-> Settings（如果装了中文插件包应该是文件 -> 选项 -> 设置），搜索 eslint，点击 Edit in setting.json
在这里插入图片描述
将以下选项添加到配置文件

 //配置eslint
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    // "eslint.run": "onSave",
    "editor.codeActionsOnSave": {
   
        "source.fixAll": true // 保存时使用eslint校验文件
    }

注：这里附上一份我的settings.json，开袋即食，把以下设置直接替换自己的即可

{
   
   "workbench.colorTheme": "Default Dark+",
   "workbench.sideBar.location": "left",
   "cssrem.rootFontSize": 80,
   "git.ignoreWindowsGit27Warning": true,
   "eslint.codeAction.showDocumentation": {
   
   		"enable": true
   },
   //配置eslint
   "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       "vue"
   ],
   // "eslint.run": "onSave",
   "editor.codeActionsOnSave": {
   
       "source.fixAll": true // 保存时使用eslint校验文件
   }
}

3、vscode开启eslint校验

有的同志的vscode编辑器可能是第一次配置，需要开启eslint校验（右下角导航里的eslint为红色禁用状态的需要开启）
在这里插入图片描述
点击之后根据自己的需求选择校验范围，我选择的是allow everywhere

4、大功告成

配置完之后，VSCode 会根据你当前 Vue 项目下的 .eslintrc.js 文件的规则来验证和格式化代码。

PS：自动格式化代码在保存时自动触发，目前试了 JS 以及 vue 文件中的 JS 代码都没问题。

补充：一键格式化项目代码

如果是整个项目里的代码都不符合自己团队想要的代码规范，再配置好上述格式化后，不想一个文件ctrl + s一次的话，那么请往下看：

1、`package.json`配置执行命令

在package.json的scripts属性里配置格式化命令

"lint": "eslint --fix --ext .js,.vue src"

在这里插入图片描述

2、全局下载`eslint`

npm install -g eslint

在这里插入图片描述

3、终端执行命令

npm run lint

在这里插入图片描述
这时eslint就会自动修复不符合项目里的eslint.js规范的代码

忽略校验文件

如果有的文件或者目录不想被eslint校验，那么可以在项目里添加.eslintignore文件，那么 在vscode中进行保存或进行一键格式化代码时，该文件或者目录下的文件不会被校验和改动。

build/*.js
src/assets
public
dist

常见问题

1、改变vscode的缩进，不随文件改变

vscode默认会根据文件的缩进来进行显示，如果我们利用eslint校验并自动修改为自己想要的缩进时，视图上而可能还显示为原本文件的缩进格式，如下图所示
在这里插入图片描述
可以看到文件已经修改为4个空格的缩进，但是视图里还是2个空格的分割线显示。

这时有两个方法可以解决：
1、如果只想改变当前文件的缩进显示
在这里插入图片描述

这样当前文件的缩进显示就正确了
2、改变编辑器所有的文件缩进显示
File -> Preference-> Settings（如果装了中文插件包应该是文件 -> 选项 -> 设置）
直接解绑按照文件缩进进行显示，设置一个默认的缩进大小，所有文件都按照这个缩进大小进行显示在这里插入图片描述

设置完之后，就可以发现所有的文件都是按照上面填写的tabsize（这里我填写的是4）进行缩进显示了

eslintrc.js配置

module.exports = {
   
    root: true,
    parserOptions: {
   
        parser: 'babel-eslint',
        sourceType: 'module'
    },
    env: {
   
        browser: true,
        node: true,
        es6: true,
    },
    extends: ['plugin:vue/recommended', 'eslint:recommended'],
    globals: {
    // 设置jquery为全局
        "$": true
    },
    // add your custom rules here
    //it is base on https://github.com/vuejs/eslint-config-vue
    rules: {