eslint使用

• 在vscode的配置

1. 下载eslint插件
   
2. 下载eslint全局插件

npm install -g eslint

// 执行命令
esllint --init // 根据需要选择即可

3. 配置eslint

"eslint.enable": true, // 启用/禁用ESLint。
    "eslint.alwaysShowStatus": true,
    "eslint.debug": true, // 启用ESLint的调试模式
    "eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序 快速修复
    "eslint.lintTask.enable": true,
    "editor.codeActionsOnSave": {
        // "source.fixAll.eslint": true // 设置保存时自动更改eslint错误
    },
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "eslint.options": { //指定eslint配置文件位置
        "configFile": ".eslintrc.js" //指定项目根目录中的eslint配置文件
    },
    "eslint.validate": [
        "javascript", "javascriptreact", "html", "vue", "typescript", "jsx",
    ],
}

更多在vscode中关于eslint的配置可查看文档

• 在项目中的配置
  在根目录添加.eslintrc.js和.eslintignore两个文件

// 在eslintrc.js中 这是vue的 eslint --init 都会自带的有 
module.exports = {
    root: true,
    "env": {
        "browser": true,
        "es2020": true
    },
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    'extends': [
        'plugin:vue/essential',
        '@vue/standard',
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    rules: { // 对项目进行规则控制
        // allow async-await
        // 'generator-star-spacing': 'off',
        // allow debugger during development
        // 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
        // 'no-undef': 'off',
        // 'camelcase': 'off'
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
};


// 在.eslintignore 中
/src/*.js // 写路径即可

在vue.config.js 中开启项目的eslint

// Type: boolean | 'warning' | 'default' | 'error'
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production',
  
  devServer: {//也可以通过设置让浏览器 overlay 同时显示警告和错误：
    overlay: {
      warnings: true,
      errors: true
    }
  } 
}

相关文档

1. https://vue-loader.vuejs.org/zh/guide/linting.html#eslint
2. https://eslint.org/docs/user-guide/configuring/ignoring-code
3. http://eslint.cn/
4. https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-eslint/README.md
5. https://github.com/ecmadao/Coding-Guide/blob/master/Notes/JavaScript/Eslint%E9%85%8D%E7%BD%AE%E8%AE%B0%E5%BD%95(with%20webpack).md

有错之处 还请不吝赐教 万分感谢