ESLint, Prettier & EditorConfig
在一般的我們從 github clone前端工程的時(shí)候，你往往會(huì)看到有些文件是對(duì)你代碼規(guī)范或者格式化做出了限制要求，我們今天就來(lái)嘗試主流的三種工具來(lái)賦能你的 dev 環(huán)境。

工具介紹

ESLInt

官網(wǎng)鏈接

找到并解決你JavaScript代碼的問(wèn)題

靜態(tài)分析你的代碼并快速定位問(wèn)題

Prettier

官網(wǎng)鏈接

有態(tài)度有傾向，盡量減少配置項(xiàng)的代碼格式化工具

配置少，支持多語(yǔ)言，與大多數(shù)編輯器整合

EditorConfig

官網(wǎng)鏈接

幫助維護(hù)不同程序員和不同IDEs一致的編碼風(fēng)格

支持大多數(shù)IDEs 少數(shù)需要安裝插件 (VS Code EditorConfig for VS Code)

自定義規(guī)則

ESLint

根目錄下創(chuàng)建 .eslintrc 文件 根據(jù)官方文檔來(lái)配置
VS Code中配合 ESLint插件 使用

Prettier

根目錄創(chuàng)建 .prettierrc 文件 (當(dāng)然也可以不用) 根據(jù)官方文檔來(lái)配置
VS Code 配合 Prettier插件 使用 (右鍵 format docuement 或 format selection)

EditorConfig

根目錄創(chuàng)建 .editorconfig 文件 來(lái)覆蓋你本地IDE的配置 根據(jù)官方文檔來(lái)配置
VS Code配合 EditorConfig插件 使用

同時(shí)使用
ESLint 已經(jīng)做到了自動(dòng)格式化但是 Prettier 做的更好
EditorConfig 可以本地修改你 IDE 的配置

Warning: 如果你同時(shí)使用 ESLint 和 Prettier可能會(huì)導(dǎo)致沖突.

demo

我們使用線上 Taro 模板舉例

yarn global add @tarojs/cli

taro init myApp 選擇模板 react-hooks

image.png

只有 ESLint 和 EditorConfig 我們先將 Prettier 加進(jìn)來(lái) 新增 .prettierrc.js

yarn add eslint-config-prettier

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

將 Prettier 添加進(jìn) ESLint 就不會(huì)互相沖突

• 將plugin 加入 extends
• 將所有格式化的配置放入 Prettier
• 將所有 Prettier 的問(wèn)題視為報(bào)錯(cuò)

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

使用 EditorConfig 結(jié)合 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

你會(huì)發(fā)現(xiàn)其實(shí) Prettier 和 EditorConfig 會(huì)有一些重復(fù)的配制 他們效果相同

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