開發風格環境的建立，使用 ESLint + Prettier + Airbnb Style Guide + VS Code

airbnb, coding style, env, eslint, preitter

目的

團隊協作中，為了保有共同的寫作格式，會要求相同的寫作規範與排版風格，利用工具來達成目的，因此方便我們能更專注在寫作上，而此篇也記錄如何順利建立起環境。

快速開始

使用工具與準則

建立環境

假設讀者已安裝完 node.js ，並能使用 npm 、 npx 或 yarn

安裝 ESLint 與 Airbnb Style Guide dependence

1
2
# 如果不使用到 React ，可安裝下列：（擇一）
yarn add -D eslint eslint-config-airbnb-base eslint-plugin-import

安裝 Prettier dependence，將 Prettier 整合進 ESLint

1
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

VS Code 中安裝擴充套件

ESLint

ESLint

Preitter

Preitter

設定環境

設置 .esLintrc.json

1
2
3
4
// 專案目錄下新增一組 .eslintrc.json (ex: touch .eslintrc.json)
{
  "extends": ["airbnb-base", "plugin:prettier/recommended"]
}

了解更多

設置 .prettierrc.json

1
2
3
4
5
6
// 專案目錄下新增一組 .prettier.json (ex: touch .prettierrc.json)
{
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100
}

還可以擴增更多

增加監聽( linting ) script

1
2
3
4
5
6
// package.json
{
  "script": {
    "lint": "eslint ."
  },
}

設定 VS Code Setting (設定)

1
2
3
{
  "editor.formatOnSave": true,
}

完成結果

如此一來，在 VS Code 就能夠順利提示錯誤給開發者，讓我們的撰寫符合規範 ：）

result