Eslint可以约束团队的代码风格统一,尤其在企业项目多人开发环境下,不同人有不同的代码偏好以及对脏代码忍受程度,所以我们需要有一定的代码风格规则去约束,这样当你拉下别人的代码迭代的时候不伤眼,当然,它同时可以帮助开发者在项目编译时暴露很多代码细节问题,避免到生产环境发生一些不必要的bug,让代码更健壮;且在长期使用Eslint情况下会逐渐培养开发者养成良好代码风格习惯提高代码可读性,注:以下所有配置项不要无脑复制,根据自己项目需求及团队开发习惯按需使用
1 | npm install eslint --save-dev |
1 2 3 | npm init @eslint/config or npx eslint --init |
1 2 3 4 5 6 7 8 9 10 11 | // 选择配置 √ How would you like to use ESLint? · > problems √ What type of modules does your project use? · > esm √ Which framework does your project use? · > vue (什么框架选什么) √ Does your project use TypeScript? · > No / Yes(ts项目就选Yes) √ Where does your code run? · > browser (一般都选择browser浏览器上运行) √ What format do you want your config file to be in? · > JavaScript The config that you've selected requires the following dependencies: eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest √ Would you like to install them now with npm? · > No / Yes (这里选Yes) |
根目录下新建.eslintrc.js,项目有就不需要建了,有的项目这个文件结尾是.json什么的都可以,具体配置细节如下,根据自己项目需求修改配置参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | // eslint-disable-next-line no-undef module.exports = { root: true, //默认情况下,ESLint 会在所有⽗级⽬录⾥寻找配置⽂件,⼀直到根⽬录。如果发现配置⽂件中有 “root”: true,它就会停⽌在⽗级 'env': { 'browser': true, 'es2021': true, 'vue/setup-compiler-macros': true }, 'parser': 'vue-eslint-parser', 'extends': [ 'eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended' ], 'parserOptions': { 'ecmaVersion': 'latest', 'parser': '@typescript-eslint/parser', 'sourceType': 'module' }, 'plugins': [ 'vue', '@typescript-eslint' ], /** * 自定义规则 * rules配置文档:http://eslint.cn/docs/rules/ * rules配置文档:http://eslint.cn/docs/user-guide/configuring#configuring-rules * 【】基本使用方式 * "off" 或者0 关闭规则 * "warn" 或者1 将规则打开为警告(不影响退出代码) * "error" 或者2 将规则打开为错误(触发时退出代码为1) * 如:'no-restricted-syntax': 0, // 表示关闭该规则 * 【】如果某项规则,有额外的选项,可以通过数组进行传递,而数组的第一位必须是错误级别。如0,1,2 * 如 'semi': ['error', 'never'], never就是额外的配置项 */ "rules": { // --以下是Possible Errors JS代码中的逻辑错误相关 'no-extra-parens': 'error', // 禁止不必要的括号 // "no-console": "error" // 不允许打印console.log 'no-template-curly-in-string': 'error', // 禁止在常规字符串中出现模板字符串语法${xxx} // --以下是Best Practices 最佳实践 'default-case': 'error', // 强制switch要有default分支 'dot-location': ['error', 'property'], // 要求对象的点要跟属性同一行 'eqeqeq': 'off', // 要求使用 === 和 !== 'no-else-return': 'error', // 禁止在else前有return,return和else不能同时存在 'no-empty-function': 'error', // 禁止出现空函数,有意而为之的可以在函数内部加条注释 'no-multi-spaces': 'error', // 禁止出现多个空格,如===前后可以有一个空格,但是不能有多个空格 'no-multi-str': 'error', // 禁止出现多行字符串,可以使用模板字符串换行 'no-self-compare': 'error', // 禁止自身比较 'no-unmodified-loop-condition': 'error', // 禁止一成不变的循环条件,如while条件,防止死循环 'no-useless-concat': 'off', // 禁止没有必要的字符串拼接,如'a'+'b'应该写成'ab' 'require-await': 'error', // 禁止使用不带await的async表达式 // --以下是Stylistic Issues 主观的代码风格 'array-element-newline': ['error', 'consistent'], // 数组元素要一致的换行或者不换行 'block-spacing': 'error', // 强制函数/循环等块级作用域中的花括号内前后有一个空格(对象除外) // 'brace-style': ['error', '1tbs', { 'allowSingleLine': true }], // if/elseif/else左花括号要跟if..同行,右花括号要换行;或者全部同一行 'comma-dangle': ['error', 'only-multiline'], // 允许在对象或数组的最后一项(不与结束括号同行)加个逗号 'comma-spacing': 'error', // 要求在逗号后面加个空格,禁止在逗号前面加一个空格 'comma-style': 'error', // 要求逗号放在数组元素、对象属性或变量声明之后,且在同一行 'computed-property-spacing': 'error', // 禁止在计算属性中出现空格,如obj[ 'a' ]是错的,obj['a']是对的 'eol-last': 'error', // 强制文件的末尾有一个空行 'func-call-spacing': 'error', // 禁止函数名和括号之间有个空格 'function-paren-newline': 'error', // 强制函数括号内的参数一致换行或一致不换行 'implicit-arrow-linebreak': 'error', // 禁止箭头函数的隐式返回 在箭头函数体之前出现换行 'indent': ['error', 2], // 使用一致的缩进,2个空格 'jsx-quotes': 'error', // 强制在jsx中使用双引号 'key-spacing': 'error', // 强制对象键值冒号后面有一个空格 'lines-around-comment': 'error', // 要求在块级注释/**/之前有一个空行 'multiline-comment-style': 'error', // 多行注释同一个风格,每一行前面都要有* 'new-cap': 'error', // 要求构造函数首字母大写 'newline-per-chained-call': ['error', { 'ignoreChainWithDepth': 2 }], // 链式调用长度超过2时,强制要求换行 'no-lonely-if': 'error', // 禁止else中出现单独的if 'no-multiple-empty-lines': 'error', // 限制最多出现两个空行 'no-trailing-spaces': 'error', // 禁止在空行使用空白字符 'no-unneeded-ternary': 'error', // 禁止多余的三元表达式,如a === 1 ? true : false应缩写为a === 1 'no-whitespace-before-property': 'error', // 禁止属性前有空白,如console. log(obj['a']),log前面的空白有问题 'nonblock-statement-body-position': 'error', // 强制单行语句不换行 // 'object-curly-newline': ['error', { 'multiline': true }], // 对象数属性要有一致的换行,都换行或都不换行 'object-curly-spacing': ['error', 'always'], // 强制对象/解构赋值/import等花括号前后有空格 'object-property-newline': ['error', { 'allowAllPropertiesOnSameLine': true }], // 强制对象的属性在同一行或全换行 'one-var-declaration-per-line': 'error', // 强制变量初始化语句换行 'operator-assignment': 'error', // 尽可能的简化赋值操作,如x=x+1 应简化为x+=1 'quotes': ['error', 'single'], // 要求字符串尽可能的使用单引号 'semi': ['error', 'always'], // 不要分号 'semi-spacing': 'error', // 强制分号后面有空格,如for (let i=0; i<20; i++) 'semi-style': 'error', // 强制分号出现在句末 'space-before-blocks': 'error', // 强制块(for循环/if/函数等)前面有一个空格,如for(...){}是错的,花括号前面要空格:for(...) {} 'space-infix-ops': 'error', // 强制操作符(+-/*)前后有一个空格 'spaced-comment': 'error', // 强制注释(//或/*)后面要有一个空格 // --以下是ECMAScript 6 ES6相关的 'arrow-body-style': 'error', // 当前头函数体的花括号可以省略时,不允许出现花括号 'arrow-parens': ['error', 'as-needed'], // 箭头函数参数只有一个时,不允许写圆括号 'arrow-spacing': 'error', // 要求箭头函数的=>前后有空格 'no-confusing-arrow': 'error', // 禁止在可能与比较操作符混淆的地方使用箭头函数 'no-duplicate-imports': 'error', // 禁止重复导入 'no-useless-computed-key': 'error', // 禁止不必要的计算属性,如obj3={['a']: 1},其中['a']是不必要的,直接写'a' 'no-var': 'error', // 要求使用let或const,而不是var 'object-shorthand': 'error', // 要求对象字面量使用简写 'prefer-const': 'error', // 要求使用const声明不会被修改的变量 'prefer-destructuring': ['error', { 'array': false, 'object': true }, { 'enforceForRenamedProperties': false }], // 要求优先使用结构赋值,enforceForRenamedProperties为true将规则应用于重命名的变量 'prefer-template': 'error', // 使用模板字符串,而不是字符串拼接 'rest-spread-spacing': 'error', // 扩展运算符...和表达式之间不允许有空格,如... re1错误,应该是...re1 'template-curly-spacing': 'error', // 禁止模板字符串${}内前后有空格 } } |
右键 -> 使用…格式化文档 -> (最后一项)配置默认格式化程序 -> 选择ESlint。之后开发时有eslint报错时,使用shift+alt+f格式化,可以解决大部分报错,个别无法格式化的就手动解决吧~
通过命令:npm run lint完成项目eslint校验
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | "scripts": { "dev": "vite --mode development", "pre": "vite build --mode development", "build": "vue-tsc --noEmit --skipLibCheck && vite build --mode production", "lint:all": "eslint "src/**/*.*" --fix -o eslint_log.log", "lint": "eslint --ext ".js,.vue,.jsx,.ts" "src" --fix --cache --cache-location "./node_modules/.cache/.eslintcache"" }, // 最后一条命令中的参数解释 /* --ext : 指定后缀文件,告诉 ESLint 哪个文件扩展名要检测的唯一方法是使用 --ext 命令行选项指定一个逗号分隔的扩展名列表。注意,该标记只在与目录一起使用时有效,如果使用文件名或 glob 模式,它将会被忽略,简单的说,使用--ext是指定文件后缀,并且后面要跟文件目录 "src" : 限制哪个目录下 -- fix : 根据配置好的规则尝试自动修复 --cache : 缓存 --cache-location : 缓存位置 */ |
有些文件或目录我们没必要通过eslint校验,这时候我们在根目录下新建.stylelintignore,规则如下,根据自己项目结构修改
1 2 3 4 5 6 | node_modules .vscode types public pre dist |
有些情况下我们并不希望eslint检查局部代码或者全局变量,例如在传统jq项目项目中,插件layer是全局变量,如何屏蔽避免报错?【Specifying Globals】当访问当前源文件内未定义的变量时,no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量,推荐你在 ESLint 中定义这些全局变量,这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。
要在你的 JavaScript 文件中,用注释指定全局变量,格式如下:
1 | /* global var1, var2 */ |
这定义了两个全局变量,var1 和 var2。如果你想选择性地指定这些全局变量可以被写入(而不是只被读取),那么你可以用一个 "writable" 的标志来设置它们:
1 | /* global var1:writable, var2:writable */ |
要在配置文件中配置全局变量,请将 globals 配置属性设置为一个对象,该对象包含以你希望使用的每个全局变量。对于每个全局变量键,将对应的值设置为 "writable" 以允许重写变量,或 "readonly" 不允许重写变量。例如:
1 2 3 4 5 6 | { "globals": { "var1": "writable", "var2": "readonly" } } |
直接在代码后添加,简单方便
1 | alert(‘foo’); // eslint-disable-line |
当引入的插件存在大量Eslint错误,在插件的js文件的头部添加命令行忽略这个文件的Eslint校验
1 | /*eslint-disable */ |
上一篇:npm升级package.json中所有依赖包到最新版本
下一篇:全球首发-Vite+Vue3+element plus icon图标按需自动导入
支付宝扫一扫打赏
微信扫一扫打赏
共 0 条评论关于"Vue3+Vite2配置Eslint代码风格校验并自动补缺修复"
最新评论