ESLint, Prettier 和 EditorConfig 设置

ESLint, Prettier & EditorConfig
在一般的我们从 github clone前端工程的时候，你往往会看到有些文件是对你代码规范或者格式化做出了限制要求，我们今天就来尝试主流的三种工具来赋能你的 dev 环境。

工具介绍

ESLInt

官网链接

找到并解决你JavaScript代码的问题

静态分析你的代码并快速定位问题

Prettier

官网链接

有态度有倾向，尽量减少配置项的代码格式化工具

配置少，支持多语言，与大多数编辑器整合

EditorConfig

官网链接

帮助维护不同程序员和不同IDEs一致的编码风格

支持大多数IDEs 少数需要安装插件 (VS Code EditorConfig for VS Code)

自定义规则

ESLint

根目录下创建 .eslintrc 文件 根据官方文档来配置
VS Code中配合 ESLint插件 使用

Prettier

根目录创建 .prettierrc 文件 (当然也可以不用) 根据官方文档来配置
VS Code 配合 Prettier插件 使用 (右键 format docuement 或 format selection)

EditorConfig

根目录创建 .editorconfig 文件 来覆盖你本地IDE的配置 根据官方文档来配置
VS Code配合 EditorConfig插件 使用

同时使用
ESLint 已经做到了自动格式化但是 Prettier 做的更好
EditorConfig 可以本地修改你 IDE 的配置

Warning: 如果你同时使用 ESLint 和 Prettier可能会导致冲突.

demo

我们使用线上 Taro 模板举例

yarn global add @tarojs/cli

taro init myApp 选择模板 react-hooks

image.png

只有 ESLint 和 EditorConfig 我们先将 Prettier 加进来 新增 .prettierrc.js

yarn add eslint-config-prettier

// .prettierrc.js
module.exports = {
  arrowParens: 'avoid',
  bracketSameLine: true,
  bracketSpacing: true,
  singleQuote: true,
  trailingComma: 'all',
  tabWidth: 2,
};

将 Prettier 添加进 ESLint 就不会互相冲突

• 将plugin 加入 extends
• 将所有格式化的配置放入 Prettier
• 将所有 Prettier 的问题视为报错

// .eslintrc
{
  "extends": ["taro/react", "plugin:prettier/recommended"],
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": "error"
  },
}

使用 EditorConfig 结合 Prettier可以让你不用每一次用 Prettier去 format 你的代码，直接就是将代码格式化好了。

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

你会发现其实 Prettier 和 EditorConfig 会有一些重复的配制 他们效果相同

EditorConfig end_of_line Prettier endOfLine
EditorConfig indent_style Prettier useTabs
EditorConfig indent_size/tab_width Prettier tabWidth
EditorConfig max_line_length Prettier printWidth