使用eslint校验代码
每个程序员都有自己的编码习惯,最常见的莫过于:
有的人写代码一行代码结尾必须加分号 ;,有的人觉得不加分号 ; 更好看;
有的人写代码一行代码不会超过 80 个字符,认为这样看起来简洁明了,有的人喜欢把所有逻辑都写在一行代码上,觉得别人看不懂的代码很牛逼;
所以使用使用统一的规则来约束代码风格非常重要。
$ npm install eslint --save-dev
eslint --init
$ npm run lint:create
> 20170811@0.1.0 lint:create D:\code\test\20170811
> eslint --init
? How would you like to configure ESLint? Answer questions about your style // 以问答的形式创建配置文件
? Are you using ECMAScript 6 features? Yes // 是否校验 Es6 语法
? Are you using ES6 modules? Yes // 是否校验 Es6 模块语法
? Where will your code run? Browser // 代码运行环境,Browser 指浏览器
? Do you use CommonJS? Yes // 是否校验 CommonJs 语法
? Do you use JSX? Yes // 是否校验 JSX 语法
? Do you use React? Yes // 是否校验 React 语法
? What style of indentation do you use? Tabs // 首行空白选择 Tab 键还是 Space
? What quotes do you use for strings? Double // 字符串使用单引号 'string' 还是双引号 "string"
? What line endings do you use? Windows // 操作系统
? Do you require semicolons? Yes // 每行代码结尾是否校验加分号 ;
? What format do you want your config file to be in? JavaScript // 以 .js 格式生成配置文件
Installing eslint-plugin-react@latest // 因为要校验 Reac 语法,所以这里需要下载一个 React 语法规则的包
package.json
"scripts": {
"test": "react-scripts test --env=jsdom",
"lint": "eslint src",
"lint:create": "eslint --init"
}
setting.json中设置
"eslint.validate": [],
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.eol": "\n",
"editor.tabSize": 2
.eslintrc文件
module.exports = {
// 当前使用的环境,例如node、window
env: {
browser: true,
es2021: true,
},
// 当前使用的规范为airbnb
extends: ['airbnb-base'],
//
parserOptions: {
// emcaVersion用来指定你想要使用的 ECMAScript 版本,当前为最新es12
ecmaVersion: 12,
// 设置为 “script” (默认)或"module"(如果代码是 ECMAScript 模块)
sourceType: 'module',
},
rules: {
quotes: [1, 'single'],
'quote-props': [2, 'as-needed'],
'comma-dangle': [1, 'always-multiline'],
'eol-last': [0, 'always'],
},
};
使用prettier自动修复
vscode安装第一个
setting.json中设置
"prettier.trailingComma": "all",
"prettier.vueIndentScriptAndStyle": true,
"git.ignoreMissingGitWarning": true,
"prettier.requireConfig": false,
"prettier.singleQuote": true,
"prettier.useTabs": false,
// tab的宽度
"prettier.tabWidth": 2,
版权声明:本文为qq_35094120原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。