阅读 707

VSCode + ESlint + Stylelint 配置指南

前言

从入坑开始接触了大大小小几十个项目了。在项目的切换中,总会碰到以下一些令人头疼的问题:

  1. 编辑的时候标红,提示代码格式错误
    • 保存的时候没有自动修复。
    • 保存的时候修复了,但是还是报错。
  2. 编辑的时候没有标红
    • 保存的时候也不报错。
    • 保存的时候报错了。
  3. Vue 项目时,只对 script 里的代码检测了语法,templatestyle 里的语法没有提示。保存时也不会自动按照规范修复。
  4. ....

怀着实在忍不了了心情,我仔细阅读了

  1. VSCode defaultsetting.json 配置
  2. ESlint 配置规则
  3. eslint-plugin-vue 文档
  4. 诸多网上的配置教程
  5. ...

如果你曾遇到这样的困惑,不妨耐心往下看,相信你会有收获。如果你是前端工程化大佬,请忽略😄

VSCode + Vue项目 为例。

我们想要的效果

  1. 编辑的时候,按照我配置的规则 A 提示我语法有错误(标红)

  2. 保存的时候,按照规则 A,自动修复所有错误。

配置VSCode

保存时自动修复文件使用哪套规则 等都在 VSCode 配置。

首先,我们需要找到 VSCode 配置规则的地方。它有 默认规则用户自定义规则

shift + cmd + P 搜索 deafult 打开 defaultSetting.json 就是 VSCode 的默认配置。 image.png

还是按 shift + cmd + P 搜索 setting 打开 setting.json 就是 VSCode 的用户自定义配置。

image.png

setting.json 里的配置会覆盖默认设置。

我们需要在 setting.json 里写入以下配置。

{
    // 保存时使用eslint格式进行修复
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true,
    },
    
    // 保存的时候自动格式化
    "editor.formatOnSave": true,
    
    // 如果你的VSCode安装了Vetur插件,以下配置是需要的
    // 这能阻止Vetur对Vue代码进行检测,提高性能
    "vetur.format.enable": false,
    "vetur.validation.template": false,
    "vetur.validation.script": false,
    "vetur.validation.style": false,
    
    // 以下配置需要VSCode安装ESlint插件
    // 使用eslint规范 .Vue,.js
    "[vue]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    
    // 使用prettier规范JSON
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    
    // eslint设置
    "eslint.alwaysShowStatus": true,
    "eslint.validate": [
        "javascript",
        "vue",
        "html"
    ],
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
}
复制代码

这样,我们有了如下效果:

  1. 保存的时候自动格式化代码并使用规则修复
  2. .vue,.js文件使用 eslint 规范
  3. .json 文件使用 prettier 规范

我们上面配置的每一条规则,都可以在 defaultSetting.json 中找到。其中有对规则的作用详细的解释。有的还会有官方链接。想深入了解的同学可以自行查找。

别忘了安装 ESlint 插件哦~

image.png

配置 ESLint 规则

配置方式有多种,可以在 package.json里配置,也可以单独配置 .eslintrc.js文件。这里我更推荐使用单独的文件配置。一目了然。

首先,我们在根目录下新建 .eslintrc.js 文件。

module.exports = {

}
复制代码

如果我们自己一条条的配置规则,估计整个人都会不好了,还好我们可以直接使用业内推荐的规范。

当然了,如果你是使用脚手架创建的项目,在创建的时候,可以选择使用脚手架默认安装 eslint相关的包。可以打开 package.json 查看是否已经安装了。如果是,则没必要重复安装。

如果还没有安装,打开命令行工具

npm i --save-dev eslint eslint-plugin-vue babel-eslint
复制代码

我们配置 .eslintrc.js

module.exports = {
    root: true,
    // 如果是SSR项目,则需要配置node:true
    env: {
        browser: true,
        node: true
    },
    // 为什么是这样的parser配置?
    // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: 'babel-eslint'
    },
    extends: [
        // 如果是nuxt.js的脚手架项目,则需要安装对应的以来并做以下配置 
        '@nuxtjs',
        'plugin:nuxt/recommended',
        
        // 让eslint可以规范vue文件
        'plugin:vue/base',
        // vue3的项目需要使用,如果是vue2项目,使用 plugin:vue/recommended
        'plugin:vue/vue3-recommended'
    ],
    plugins: [
        // 注意这里不能配置 html 选项,原因:
        // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
        'vue'
    ],
    // 配置自己的规则,覆盖上面继承的规则
    rules: {
        // 配置js的缩进为 4,switch case 语句的 case 也使用4个空格缩进 
        indent: ['error', 4, { SwitchCase: 1 }],
        // 使用 eslint 检测 template里的代码,这里我配置 4 个空格缩进
        'vue/html-indent': [
            'error',
            4
        ]
    }
}
复制代码

以上配置,大家根据自己的项目特点,自行删减即可。比如,如果你的项目不是 nuxt.js 的,可以去掉 extends 里的 '@nuxtjsplugin:nuxt/recommended

现在我们基本已经实现了想要的效果。

  1. 编辑的时候,对 .js,.vue 文件的 templatescript 使用配置的 eslint 规范检查。
  2. 保存的时候,对以上文件使用相同的 eslint 规范进行自动修复。

配置 stylelint

不过我们现在还不能对 .css,.scssvue 文件里的 style 部分做规范检查和自动修复。这需要安装stylelint

npm i --save-dev stylelint stylelint-config-standard stylelint-scss
复制代码

以上安装了 stylelint 和 业内使用比较多的规范 stylelint-config-standard 和对 scss 语法的支持 stylelint-scss

接下来我们需要配置它们。

在根目录下新增 .stylelintrc.json 文件。

{
    // 使用规范
    "extends": "stylelint-config-standard",
    // 自定义4个空格缩进
    "rules": {
        "indentation": 4
    }
}
复制代码

VSCode 安装 stylelint 插件。

大功告成!赶快试试吧~

文章分类
前端
文章标签