eslint使用 - 技术栈

在vscode的配置

下载eslint插件
下载eslint全局插件

js 复制代码

npm install -g eslint

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

配置eslint

js 复制代码

"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两个文件

js 复制代码

// 在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

js 复制代码

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