前端项目使用eslint提高代码质量
1、写在前面
前面博客介绍现代化前端测试时讲到静态测试
,即在编写代码逻辑阶段时进行报错提示。
本文介绍使用ESLint来进行javascript代码检查。
ESLint 是一个插件化的 javascript 代码检测工具,它可以用于检查常见的 JavaScript 代码错误,也可以进行代码风格检查,这样我们就可以根据自己的喜好指定一套 ESLint 配置,然后应用到所编写的项目上,从而实现辅助编码规范的执行,有效控制项目代码的质量。
2、安装
npm i eslint -g
3、测试
测试eslint, 写了app.js作为测试文件
const str = 'test'
console.log(str)
执行eslint .\app.js 命令,结果:
执行 eslint --init
生成配置文件.eslintrc.js内容如下
module.exports = { "env": { "es6": true }, "extends": [ "plugin:react/recommended", "google" ], "globals": { "Atomics": "readonly", "SharedArrayBuffer": "readonly" }, "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2018, "sourceType": "module" }, "plugins": [ "react", "@typescript-eslint" ], "rules": { } };
执行eslint .\app.js
1:19 error Missing semicolon semi: 语句后面没有';'作为语句的结束
2:18 error Newline required at end of file but not found eol-last:文件最后要空一行
1:19 error Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style:换行符应该为LF而不是CRLF
tips:
- CR:Carriage Return,对应ASCII中转义字符\r,表示回车
- LF:Linefeed,对应ASCII中转义字符\n,表示换行
- CRLF:Carriage Return & Linefeed,\r\n,表示回车并换行
Windows操作系统采用两个字符来进行换行,即CRLF;Unix/Linux/Mac OS X操作系统采用单个字符LF来进行换行;另外,MacIntosh操作系统(即早期的Mac操作系统)采用单个字符CR来进行换行。
4、自定义rules实践
.eslintrc.js
module.exports = { "env": { // "browser": true, "node": true, "es6": true, // "mocha": true }, // "extends": [ // "plugin:react/recommended", // "google" // ], "extends": ["eslint:recommended"], "globals": { "window": true, "Atomics": "readonly", "SharedArrayBuffer": "readonly" }, "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 2018, "sourceType": "module" }, "plugins": [ "react", "@typescript-eslint" ], "rules": { "no-console": "error", "semi": [ "error", "never" ] } };
"no-console": "error"表示如果使用console会报错;如果配置成off,表示可以用console打印信息
"semi": [ "error", "never" ] 表示不可以使用";"作为代码行结束
5、vs code的eslint插件
1) https://blog.csdn.net/chushoufengli/article/details/88994119
2) https://www.cnblogs.com/weilai-info/p/10988829.html
3) https://www.jianshu.com/p/c89e0af9e3d7
4) https://www.jianshu.com/p/4294e5832cf7
6、package.json配置eslint命令
"scripts": { "lint": "eslint .", "fix": "eslint --fix ." },
使用npm run lint或npm run fix
7、忽略lint的文件
.eslintignore
build
test
node_modules
8、提交git时强制eslint,不通过不让提交
安装pre-commit
npm i pre-commit -D
package.json配置
"scripts": { "lint": "eslint .", "fix": "eslint --fix ." }, "pre-commit":[ "fix", "lint" ],
git commit 之前会执行fix和lint两个命令
---
posted on 2020-02-03 15:54 wenbin_ouyang 阅读(500) 评论(0) 编辑 收藏 举报