ESLint是一个JavaScript代码静态检查工具,可以检查JavaScript的语法错误,提示潜在的bug,可以有效提高代码质量。维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则,也提供用户自定义规则来约束所写的JavaScript代码。
详细的可以参考:ESLint中文
让项目加上ESLint代码规范支持非常容易。
安装安装ESLint、ESLint loader
npm install --save-dev eslint@3.19.0
npm install --save-dev eslint-loader
逐个配置规则有点麻烦,ESLint有很多第三方配置好的格式插件,Airbnb开发配置合集就比较常用:
npm install --save-dev eslint-config-airbnb
Airbnb包括了以下三个插件需要安装:
npm install --save-dev eslint-plugin-import
npm install --save-dev eslint-plugin-react
npm install --save-dev eslint-plugin-jsx-a11y
项目根目录下创建并ESLint配置文件,.eslintrc.js:
module.exports = {
// 指定校验的ECMAScript的版本及特性
"parserOptions": {
"ecmaVersion": 7, // ECMAScript版本,7为ES7
"sourceType": "module", //默认script,如果代码是ECMAScript模块,设置为module
"ecmaFeatures": { // 使用额外的语言特性
"jsx": true // 启用JSX
}
},
// 当访问未定义的变量时,no-undef 规则将发出警告
// 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量
"env": {
"es6": true,
"node": true,
"browser": true,
},
// 当访问未定义的变量时,no-undef 规则将发出警告
// 脚本在执行期间访问的额外的全局变量
"globals": {
"document": true,
"navigator": true,
"window":true,
"node":true
},
// 使用第三方airbnb开发配置合集
"extends": "airbnb",
// eslint-config-airbnb包括了以下3个插件
"plugins": [
"react",
"jsx-a11y",
"import"
],
// 定义自己的规则
"rules": {
"comma-dangle": ["error", "never"], // 要求或禁止末尾逗号:不允许逗号
"indent": ["error", 4], // JavaScript代码强制使用一致的缩进:4格缩进
}
};
可以参照ESLint完整规则列表,找到并定制自己的规则。