eslint配置与使用 | 您所在的位置:网站首页 › vscode 错误提示 eslint › eslint配置与使用 |
ESLint 是一个 JavaScript 代码检查工具,它可以用于检查代码的风格和潜在错误,并提供规范化和代码质量控制。下面是 ESLint 配置文件中常见的配置选项: 一、安装 ESLint首先,在命令行中执行以下命令,全局安装 ESLint: npm install -g eslint 然后,在项目根目录下执行以下命令,初始化 ESLint 配置: eslint --init 二、常用配置选项 1. parser指定解析器,默认使用 Espree。例如,使用 Babel 解析器: module.exports = { parser: 'babel-eslint' } 2. extends扩展已有的配置规则集。可选值有: eslint:默认规则airbnb: Airbnb 风格规则google:Google 风格规则standard:JavaScript Standard Style 规则vue:Vue.js 规则例如,使用 airbnb 规则: module.exports = { extends: 'airbnb-base' } 3. rules指定自定义的规则或修改已有的规则。规则可以指定警告级别和错误级别,分别为 "warn" 和 "error"。 例如,禁止多余的分号: module.exports = { rules: { 'no-extra-semi': 'error' } } 4. env指定环境,与全局变量有关。可选值有:es6、browser、node、commonjs、amd、mocha、jquery、prototypejs、shelljs、mongo、jasmine、phantomjs、protractor。 例如,使 ES6 环境可用: module.exports = { env: { es6: true } } 5. globals定义全局变量: module.exports = { globals: { Vue: false } } 三、示例配置文件下面是一个示例配置文件,使用 airbnb 规则并修改了一些自定义规则: module.exports = { extends: 'airbnb-base', rules: { 'no-console': 'off', 'no-unused-vars': 'error', 'no-extra-semi': 'error', 'semi': ['error', 'never'] }, env: { es6: true, node: true }, globals: { Vue: false } } 在项目根目录下创建 .eslintrc.js 文件,并将上述内容拷贝到该文件中。然后,在编辑器中安装并启用 eslint 插件,就可以实现代码检查功能了。 vscode配置ESlint在vscode扩展中下载 点击插件设置按钮,选择扩展设置 在搜索框中输入 "eslint.enable",选中 "工作区" 或 "用户" 选项,将其设为 true。 然后点击右上角按钮(看截图) setting.json: 1 //配置eslint 2 "eslint.autoFixOnSave": true, 3 "files.autoSave":"off", 4 "eslint.validate": [ 5 "javascript", 6 "javascriptreact", 7 "html", 8 { "language": "vue", "autoFix": true } 9 ], 10 "eslint.options": { 11 "plugins": ["html"] 12 }, 13 //为了符合eslint的两个空格间隔原则 14 "editor.tabSize": 2这样每次保存文件(ctrl+s)时,eslint插件会自动对当前文件进行eslint语法修正! .eslintrc.cjs 文件代码示例(把一下代码复制到.eslintrc.cjs 文件里) module.exports = { "env": { "browser": true, "es2021": true, "node": true }, "extends": [ "eslint:recommended", "plugin:vue/vue3-recommended", "plugin:prettier/recommended", "eslint-config-prettier" ], "overrides": [ ], "parserOptions": { "ecmaVersion": "latest", "sourceType": "module", "ecmaFeatures": { "modules": true, 'jsx': true }, "requireConfigFile": false, 'parser': '@babel/eslint-parser' }, "plugins": [ "vue", "prettier" ], "rules": { 'no-console': 'warn', // 禁止出现console 'no-debugger': 'warn', // 禁止出现debugger 'no-duplicate-case': 'warn', // 禁止出现重复case 'no-empty': 'warn', // 禁止出现空语句块 'no-extra-parens': 'warn', // 禁止不必要的括号 'no-func-assign': 'warn', // 禁止对Function声明重新赋值 'no-unreachable': 'warn', // 禁止出现[return|throw]之后的代码块 'no-else-return': 'warn', // 禁止if语句中return语句之后有else块 'no-empty-function': 'warn', // 禁止出现空的函数块 'no-lone-blocks': 'warn', // 禁用不必要的嵌套块 'no-redeclare': 'warn', // 禁止多次声明同一变量 'no-return-assign': 'warn', // 禁止在return语句中使用赋值语句 'no-return-await': 'warn', // 禁用不必要的[return/await] 'no-self-compare': 'warn', // 禁止自身比较表达式 'no-useless-catch': 'warn', // 禁止不必要的catch子句 'no-useless-return': 'warn', // 禁止不必要的return语句 'no-multiple-empty-lines': 'warn', // 禁止出现多行空行 'no-useless-call': 'warn', // 禁止不必要的.call()和.apply() 'no-var': 'warn', // 禁止出现var用let和const代替 'no-delete-var': 'off', // 允许出现delete变量的使用 'no-shadow': 'off', // 允许变量声明与外层作用域的变量同名 'dot-notation': 'warn', // 要求尽可能地使用点号 'default-case': 'warn', // 要求switch语句中有default分支 'eqeqeq': 'warn', // 要求使用 === 和 !== // 'curly': 'warn', // 要求所有控制语句使用一致的括号风格 'space-infix-ops': 'warn', // 要求操作符周围有空格 'space-unary-ops': 'warn', // 要求在一元操作符前后使用一致的空格 'switch-colon-spacing': 'warn', // 要求在switch的冒号左右有空格 'arrow-spacing': 'warn', // 要求箭头函数的箭头前后使用一致的空格 'array-bracket-spacing': 'warn', // 要求数组方括号中使用一致的空格 'brace-style': 'warn', // 要求在代码块中使用一致的大括号风格 'max-depth': ['warn', 4], // 要求可嵌套的块的最大深度4 'max-statements': ['warn', 100], // 要求函数块最多允许的的语句数量20 'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度3 'max-statements-per-line': ['warn', { max: 1 }], // 要求每一行中所允许的最大语句数量 "vue/require-default-prop": 0, // 关闭属性参数必须默认值 "vue/singleline-html-element-content-newline": 0, // 关闭单行元素必须换行符 "vue/multi-word-component-names":"off", "vue/multiline-html-element-content-newline": 0, // 关闭多行元素必须换行符 // 要求每一行标签的最大属性不超五个 'vue/max-attributes-per-line': ['warn', { singleline: 5 }], // 取消关闭标签不能自闭合的限制设置 "vue/html-self-closing": ["error", { "html": { "void": "always", "normal": "never", "component": "always" }, "svg": "always", "math": "always" }] } } |
CopyRight 2018-2019 实验室设备网 版权所有 |