eslint + editorconfig
发布于 5 个月前 作者 zhb333 432 次浏览 来自 分享

eslint + editorconfig

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

一、editorconfig

在使用不同的编辑器,或者在windowmac 等不同的系统上编写的代码,会有一定的风格差异,如在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

eslintjavascript 的代码检查工具, 在编写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/ 使用的是Reactjsx 语法, 应该使用相应的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. 安装webpackeslint解析器 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

出现了下面的错误提示:

回到顶部