定義屬於你的風格 X VS Code Extensions X ESLint X Prettier 從把妹角度理解前後端如何和平相處

VS Code Extensions

VSCode 的市集提供了相當多的 Extensions 能增進工程師的開發效能，Extensions 就像把妹神器，會幫你產出撩妹金句、決定今日穿搭 OOTD、推薦節日可以吃的餐廳或可以送的禮物。

以程式開發來說，各種語言的 Extension Pack，能快速協助我們進行相關語言的開發

• React Extension Pack
• Node.js Extension Pack
• Extension Pack for Java
• Spring Boot Extension Pack

協助版本控制的相關外掛則讓版控更親民方便

• GitLens: 方便看出哪一行是誰在什麼時候寫的
• Git Graph: 圖像化 Git 紀錄，熟悉後在操作上會更方便

這幾年工作下來，會發現各式語法其實蠻多的且不斷在更新，有些細節其實無法全部都記得非常清楚，這時候透過自動完成可以加速開發效率

• Auto Close Tag: 寫網頁或是 jsx 的時候很方便，可以少打很多東西
• Auto Rename Tag: 協助把對稱的自動改好很方便
• Auto Import: 自動 import 要使用的元件或 function
• Path Intellisense: 引入檔案的時候，如果資料都有照邏輯擺，那這個就能加速找檔案過程
• SCSS IntelliSense: 協助寫一些像是 @include 的語法

語法樣板提供了一個偷吃步，快速的產生相關樣板，開發時只需要進行填空

• HTML Snippets: 有時候在切單純一頁 html 的時候好用
• Reactjs code snippets: 較新的語法可能未支援，優點打 rccp 就可以自動完成元件架構
• React Hooks Snippets

CSS in JS

• vscode-styled-components
• vscode-styled-jsx: React 開發必備

記錄代辦事項

• TODO Highlight、TODO Tree: 任務標籤

在編輯器中將色碼上色的外掛

• Color Highlight: 色碼會幫我們上色

檢查拼字錯誤的外掛

• Code Spell Checker

Linting & Formatting

• Lint 可以幫助團隊減少錯誤
  • webhint: 網頁相關提示
  • ESLint: 是 linter 用來檢視程式碼的品質，找到可能的錯誤並提示，建議搭配安裝 airbnb 相關配置
  • StyleLint
  • Sass Lint
  • markdownlint
• Formatting 可以統一大家的排版
  • Prettier: 偏向 code formatter 主要專注在排版
  • Beautify css/sass/scss/less
• Code Spell Checker: 常常英文拼錯但人腦還是可以辨識，改錯字就靠外掛了

VS Code ESlint + Prettier 厲害的地方在也可以套用 airbnb 的 coding style，不然每個人加入團隊前光看 coding style rule 就飽了 Orz

Prettier

會需要使用 npm 進行 node_modules 的安裝，相關的使用說明可以參考這篇 NPM 常用指令教學。

1. npm i prettier -D
2. 加入 .prettierrc

1
2
3
4

{
  "tabWidth": 2,
  "singleQuote": true
}

3. Format 可以設定自動跟手動

ctrl shift + P 執行 Open Workspace Settings(JSON) 編輯 settings.json

讓 VS code 在存檔時自動格式化文件

1
2
3

{
  "editor.formatOnSave": true
}

手動的話則建議加入 npm script 較方便

1
2
3
4
5

{
  "scripts": {
    "prittier-fix": "prettier --write \"./{src}/**/{*.js,*.jsx}\""
  }
}

ESLint

1. npx install-peerdeps --dev eslint-config-airbnb
2. npm i -D eslint-config-prettier eslint-plugin-prettier
3. 加入 .eslintrc.js 或 .eslintrc 在根目錄

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const fs = require("fs");
const path = require("path");

// 把 ptettierrc 讀進來套用
const prettierOptions = JSON.parse(
  fs.readFileSync(path.resolve(__dirname, ".ptettierrc"), "utf8")
);

module.export = {
  // ESLint 預設警告是紅色 (danger) 顯示。
  // Prettier 預設警告也是紅色 (danger) 顯示，不跟 ESLint 混淆，因此改成黃色 (warning) 顯示。
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": ["warn", prettierOptions],
  },
  // 要把 prettier 放在最後面。
  extends: [
    // ...,
    "prettier",
  ],
};

手動執行 ESLint 也建議加入 npm script 較方便

1
2
3
4
5

{
  "scripts": {
    "lint-fix": "eslint . --ext .js --fix"
  }
}

有了這個工具就可以快速的自動提示，也可以依照需求 disable 掉一些短時間還來不及改的寫法

• “off” 或 0-關閉規則
• “warn” 或 1-開啟規則，使用警告級別的錯誤：warn(不會導致程序退出)
• “error” 或 2-開啟規則，使用錯誤級別的錯誤：error(當被觸發的時候，程序會退出)

詳細可以看 ESLint 網站上的配置教學，比較特別的是也有支援 jsdoc 的提示，對於事情雜亂一堆文件還沒補，有時補東就忘了西的人來說，真的是個優秀的發明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

{
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "mocha": true
  },
  "rules": {
    "one-var": 0,
    "no-var": 0,
    "prefer-template": 0,
    "valid-jsdoc": [
      "error",
      {
        "requireReturn": true,
        "requireReturnType": true,
        "requireParamDescription": true,
        "requireReturnDescription": true
      }
    ],
    "require-jsdoc": [
      "error",
      {
        "require": {
          "FunctionDeclaration": true,
          "MethodDefinition": true,
          "ClassDeclaration": true
        }
      }
    ]
  }
}

• ← 上一篇
• 下一篇 →