Eslint-代码规范请了解一下

简介

最近换工作，到了新公司接手了一个写的非常感人的项目，代码简直一锅粥，含泪填坑数十日，让我了解了代码规范的重要性，下定决心好好学习编码规范，就从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? JavaScript
Checking 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? Yes
The 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 的文件
我们的 eslint 将根据这个文件来查验我们的代码 我们的文件现在是

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的过程中 我们可能会用到一些还没有完美制定的规范如 babel-preset-stage-0
在我们的js语法中有这些东西时 eslint 会报错,解决问题的办法时:
下载 babel-eslint 并在 .eslintrc.js 加上这一项:

"parser": "babel-eslint",
复制代码

最后

我把我遇到过的部分问题记录了一下放在 这里 其中有几个搜索了很长时间,给大家参考一下

转载于:https://juejin.im/post/5b310272518825748954cae2