Eslint 的使用

安装

// vsCode 安装eslint扩展

// 全局安装
npm i -g eslint babel-eslint

//项目安装eslint依赖项
yarn add eslint babel-eslint eslint-plugin-vue -D

//安装npx
npm install -g npx

//在项目里同过npx 初始化eslint配置【按选项配置】
npx eslint --init

ESLint vs code 配置

打开插件 =====》点击扩展设置

添加配置

每次在保存的时候就可以根据 .eslintrc.js 文件里你配置的ESLint规则 来处理不符合规则的代码；

例如：配置了禁止分号，代码写了分号，保存时自动将分号干掉。

代码

eslintrc里有对应规则配置和解释

.eslintignore 文件

/node_modules/
/public/
.vscode
.idea

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    /**
     * 这个选项是配置eslint 的验证规则的对象,[进入链接随便点击一个就是这个路径的配置]
     * https://eslint.bootcss.com/docs/rules/
     */
    "rules": {
        "semi": [2, 'never'],
        "no-multiple-empty-lines": [
            "error", {
                "max": 2,
                "maxEOF": 1
            }
        ],
        "for-direction": "error",

        /**
         * eslint-plugin-vue 对vue的配置规则
         */
        // https://eslint.vuejs.org/rules/multi-word-component-names.html
        'vue/multi-word-component-names': [ 
            "error", {
                // ignores要忽略的组件名称。将组件名称设置为允许, 其他非驼峰命名则错误
                ignores: [
                    'index'
                ]
            }
        ],
    }
}

过程问题

module’ is not defined

"env": {
    "node": true // 这个配置让文件支持 module.exports ，否则会 'module' is not defined.
},

使用方式

其中 配置文件中使用 extends": "eslint:recommended 来启用推荐的规则，再安装是初始化的配置项就启动了

// "eslint:recommended" 初始化时就开启了
module.exports = {
    "extends": [
        "eslint:recommended",
    ],
 }

例如点击 for-direction

其中注释就写好语法了

"rules": {
    "for-direction": "error",
 }

BUG

Cannot find module ‘babel-eslint’ 找不到模块 ‘babel-eslint’

解决：

npm i -g eslint babel-eslint

---

BUG2

使用eslint的时候每次都有这么多格式问题，一个个找起来又很浪费时间

解决：

根目录建立目录: .vscode/ extensions.json

{
  "recommendations": ["johnsoncodehk.volar"]
}

其他问题

基本可以根据报错的eslint规则在文档找到原因