简介
最近换工作，到了新公司接手了一个写的非常感人的项目，代码简直一锅粥，含泪填坑数十日，让我了解了代码规范的重要性，下定决心好好学习编码规范，就从Eslint开始。
ESLint
ESLint是可组装的JavaScript和JSX检查工具。能保证写出语法正确、风格统一的代码。
安装及使用
npm install -D eslint 安装 eslint
npx eslint --init 设置一个配置文件 会让你选择怎么配置 ? How would you like to configure ESLint? (Use arrow keys) Use a popular style guide> Answer questions about your style Inspect your JavaScript file(s)复制代码
我们选择 Use a popular style guide 用一个流行的规则 Airbnb !
? How would you like to configure ESLint? Use a popular style guide? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)? Do you use React? Yes? What format do you want your config file to be in? JavaScriptChecking peerDependencies of eslint-config-airbnb@latest? The style guide "airbnb" requires eslint@^4.19.1. You are currently using eslint@5.0.0. Do you want to downgrade? YesThe config that you've' selected requires the following dependencies:eslint-config-airbnb@latest eslint@^4.19.1 eslint-plugin-import@^2.12.0 eslint-plugin-jsx-a11y@^6.0.3 eslint-plugin-react@^7.9.1? Would you like to install them now with npm? Yes复制代码
等待下载完成,我们的项目下应该生成了一个 .eslintrc.js 的文件
module.exports = { "extends": "airbnb"};复制代码 我们也可以给它添加自己的规则如:
// 定义自己的规则"rules": { "linebreak-style": ["off", "windows"], //换行符设置 "comma-dangle": ["error", "never"], // 要求或禁止末尾逗号：不允许逗号 "indent": ["error", 4], // JavaScript代码强制使用一致的缩进：4格缩进 "react/jsx-indent": ["error", 4], //react jsx-indent 4缩进 "react/jsx-indent-props": ["error", 4], //react jsx-indent-props 4缩进} 复制代码 也可以根据 eslint 和 自己修改配置及规则
如何使用
我们直接在命令行工具中写 npx eslint xx.js 就可以对单个文件进行校验
package.json -> scripts 里配置 npx eslint src/**/*.js src/**/*.jsx 就可以让 eslint 校验 src 文件夹下的所有文件 注意 其实可以在后面加上 --fix 来自动修复一些问题 但是很多规则应该自己掌握吧... 尽量写好 在webpack中配合babel使用
如果我们要配置 webpack 和 babel 中使用,需要下载 eslint-loader
npm install -D eslint-loader 并在 webpack.config.js 的 module -> rules中修改对 js 文件的处理添加 eslint-loader { test: /\.js|jsx$/, use: ['babel-loader', 'eslint-loader'], exclude: /node_modules/}复制代码 这样我们在使用 webpack 打包时就会对js语法进行检测,如果有问题会报错
babel-preset-stage-0 在我们的js语法中有这些东西时 eslint 会报错,解决问题的办法时: 下载 babel-eslint 并在 .eslintrc.js 加上这一项: "parser": "babel-eslint",复制代码
最后
我把我遇到过的部分问题记录了一下放在 其中有几个搜索了很长时间,给大家参考一下