一. 规范化介绍
1. 为什么要有规范化标准
软件开发需要多人协同,不同开发者有不同的编码习惯和喜好,不同的喜好增加项目维护成本,每个项目或团队需要明确统一的标准。
2. 哪里需要规范化标准
代码、文档、设置提交日志,开发过程中人为编写的成果物,其中代码标准化规范最为重要。
3. 实施规范化的方式
编码前认同标准约定、通过工具实现 Lint(对代码进行规范化,统称 Lint)。
二. ESLint 介绍
ESLint 是目前最主流的 Javascript 代码的 Lint 工具,可以很容易地监测 JS 代码质量,统一开发者的编码风格,并进一步提高开发者的编码能力。
三. ESLint 的基本使用
1. 基本使用
安装:
cnpm i -D eslint
初始化其配置文件(npx 是一个命令执行工具 作用相当于在node_modules下执行 eslint --init):
npx eslint --init
校验文件:
npx eslint ./01-prepare.js
校验文件并修复:
npx eslint ./01-prepare.js --fix
2. 配置注释 - 让 eslint 对部分代码不进行(某项或全部规则)的检查
配置注释的文档: http://eslint.cn/docs/user-guide/configuring#configuring-rules
/* index.js 文件 */
// 跳过对当前行的检查
console.log('123'); // eslint-disable-line
// 跳过对当前的 某个规则 的检查
const str1 = "${name} is a coder" // eslint-disable-line no-template-curly-in-string
// 跳过对下一行的检查
// eslint-disable-next-line
alert('foo');
/* detail.js 文件 - 跳过对本文件的检查 */
// eslint-disable
四. ESLint 结合 Webpack
安装 eslint:
cnpm i -D eslint
安装 eslint-webpack-plugin:
cnpm i -D eslint-webpack-plugin
初始化 eslint 配置文件 .eslintrc.js:
npx eslint --init
在 webpack.config.js 文件中新增如下配置:
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
plugins: [
new ESLintPlugin()
]
}
PS: 对于 React 项目,eslint 会报 如下两个错误:
error 'React' is defined but never used no-unused-vars
error 'App' is defined but never used no-unused-vars
解决方法是:
cnpm i -D eslint-plugin-react
然后在 .eslintrc.js中,设置:
module.exports = {
"extends": "plugin:react/recommended",
}
五. ESLint 结合 Gulp
安装 eslint:
cnpm i -D eslint
安装 gulp-eslint:
cnpm i -D gulp-eslint
在 gulpfile.js 文件中,把 js 任务配置上 gulp-eslint:
const eslint = require('gulp-eslint');
const script = () => {
return src('src/assets/scripts/*.js', { base: 'src' })
.pipe(eslint()) // 执行 eslint 检查
.pipe(eslint.format()) // 打印 eslint 检查结果
.pipe(eslint.failAfterError()) // eslint 如有报错,则本任务终止
.pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
.pipe(dest('temp'))
.pipe(bs.reload({ stream: true }))
}
module.exports = {
script
}
安装 babel-eslint:
cnpm i -D babel-eslint
在 .eslintrc.js 文件中,配置上 parser:
module.exports = {
"env": {
"browser": true,
"jquery": true, // + 如果用到了jquery 必需
},
"parser": "babel-eslint", // + 必需
"extends": [
"standard"
],
"parserOptions": {
"ecmaVersion": 12
},
"rules": {
},
};
六. 样式规范工具 StyleLint 和 通用代码规范工具 Prettier
参考相关 npm 文档。
本文 完。

被折叠的 条评论
为什么被折叠?



