eslint + editorconfig
发布于 6 年前 作者 zhb333 3179 次浏览 来自 分享

eslint + editorconfig

获取源码 本文基于《webpack构建React工程（第一季）》

一、editorconfig

在使用不同的编辑器，或者在window 或 mac 等不同的系统上编写的代码，会有一定的风格差异，如在window 上默认换行 使用 crlf , 而在 mac 上的换行风格是 lf ; 有的编辑器默认缩进使用 tab , 而有的编辑器使用 space ; 为了统一这些差异， 我们需要使用 editorconfig 来统一规范；

使用 editorconfig 的前提是你的编辑器必须安装支持， 我使用的是 vscode, 这里我简单介绍一下怎么安装：

editorconfig的配置十分简单， 官网只提供配置项也很少，下面我编写的配置文件，其实基本上已经包括了官网提供的所有配置： 点击进入editorconfig官网

在项目的根目录下创建 .editorconfig 配置文件：

# 根目录
root = true

# 匹配所有文件类型
[*]
# 字符编码
charset = utf-8
# 缩进格式
indent_style = space
# 使用2个空格缩进
indent_size = 2
# 换行格式
end_of_line = lf
# 在代码最后添加一行空行
insert_final_newline = true
# 去除行末尾多余的空白
trim_trailing_whitespace = true

[*.json]
indent_size = 4

[*.md]
trim_trailing_whitespace = false

二、eslint

eslint 是 javascript 的代码检查工具， 在编写js代码的时候，有些错误很难被发现，需要在运行的时候不断的排错； 而且， 每个人的编写代码的风格不一致，如：有人喜欢用单引号，有人喜欢双引，有人写的代码精简，有人写的代码详细等， 这样造成了阅读对方代码的困难；因此我们需要eslint，在编写的过程发现错误，并统一风格；

eslint的使用相对比较复杂，建议去官网学习点击进入eslint中文网，或看一些不错的博文入门:利用ESLint检查代码质量，我这里不做详细介绍：

1. 安装eslint

cnpm i eslint D

2. 编辑器安装eslint插件

3. 在根目录下编写 .eslintrc.js、 .eslintignore

.eslintrc.js

module.exports = {
    parser: 'babel-eslint',
    extends: 'standard',
    rules: {
      'semi':['error','always']
    }
}

.eslintignore

node_modules/
.vscode/
dist/
.git/

4. 安装依赖

cnpm i babel-eslint eslint-config-standard \
eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D

上面为什么要装第二行的那些依赖， 你可以到 npm中查看，这些依赖是对 eslint-config-standard的支持

5. 安装 husky, 这是git提交前的钩子，可以在commit前执行一些命令

cnpm i husky -D

6. 在package.json 中编写执行脚本

"lint": "eslint --ext .js ./",
"precommit": "npm run lint"

7. 在执行git commit -m "" 时会自动执行package.json 中的 "lint" 脚本命令，对代码进行检查， 这时肯定会报大量的错误， 一个一个的打开 *.js 文件， 因为我们已经在编辑器中安装了 eslint插件， 不符合规范的代码会有红色波浪线提醒，根据提示修改代码， 直到所有代码均满足规范才能提交git 仓库， 如果你也是使用 vscode编辑器， 执行快捷键 shift + alt + ‘f’ 会修复大量的不规范代码。。。 但是， 我们在client/ 使用的是React 的 jsx 语法， 应该使用相应的eslint规范才行， 我们这里使用的是 airbnb

8. 安装airbnb及相关依赖

cnpm install --save-dev eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react -D

9. 新建 client/.eslintrc.js 文件

module.exports = {
  extends: 'airbnb',
  parser: 'babel-eslint',
  env: {
    'browser': true,
    'node': true,
    'es6': true,
  },
  'parserOptions': {
    'ecmaVersion': 6,
    'sourceType': 'module',
    'ecmaFeatures': {
      'jsx': true
    }
  },
  rules: {

  }
}

10. 更改package.json 中的 "lint"脚本： "lint": "eslint --ext .js ./ && eslint --ext .js, .jsx client/",

11. 再次提交 git commit -m "airbnb", 这次会报关于 jsx语法的错误， 根据编辑器提示修改， 如果有一些报错觉得太严格，我们也可以把该eslint规范关闭掉：

rules: {
    'react/jsx-filename-extension': [0] // 不允许在js文件中编写jsx
  }

三、开发时的 eslint 检查

上面我们说了在提交时进行eslint代码检查， 那么在开发过程，我们也需要实时知道报错信息，以便及时修复

1. 安装webpack的eslint解析器 eslint-loader

cnpm i eslint-loader -D

2. 同时编辑 build/webpack.config.js build/webpack.server.js 这样可以在webpack-dev-server环境下以及使用webpack 打包线上代码时 进行client目录的eslint代码检查:

module.rules

{
  enforce: 'pre', // 执行webpack时优先执行
  test: /\.(js|jsx)$/i,
  loader: 'eslint-loader',
  exclude: path.join(__dirname, '../node_modules')
},

3.可以尝试修改client下的代码，使其不符合 airbnb标准， 这样在打包 或者 webpack-dev-server开发环境，就会及时保错了，（如，去掉App.jsx中的分号，然后开启webpack-dev-server环境）

npm run devc

出现了下面的错误提示：

回到顶部