VS Code Extensions 推薦 React 前端常用的編輯器外掛

me
林彥成
2019-06-25 | 1 min.
文章目錄
  1. 1. 為什麼需要使用 Extensions?
  2. 2. Linting & Formatting
  3. 3. 自動完成
  4. 4. 版本控制
  5. 5. 一般用途

微軟的 VS Code 有非常多的 Extensions 能增進(前端)工程師的開發效能,就從 Linting & Formatting、自動完成、版本控制三個面向來推薦給大家。

  • Linting & Formatting: 幫助團隊減少錯誤
  • 自動完成: 加速開發效率
  • 版本控制: 軟體開發必備

為什麼需要使用 Extensions?

起初前端編輯器並不方便,node.js 出現後,electron 結合了 node.js 和 chromium,讓 JavaScript 也可以開發桌面端的應用,也就代表原本的文字編輯器可以執行 JavaScript,這樣一來基本錯誤就可以在編輯器中被發現,而不用每次都開啟瀏覽器才發現問題。

VSCode 的市集連結如下:
https://marketplace.visualstudio.com/VSCode

Linting & Formatting

  • Lint 可以幫助團隊減少錯誤
    • ESLint: 建議搭配安裝 airbnb 相關配置
    • StyleLint
    • Sass Lint
    • markdownlint
  • Formatting 可以統一大家的排版
    • Prettier
    • Beautify css/sass/scss/less
  • Code Spell Checker: 常常英文拼錯但人腦還是可以辨識,改錯字就靠外掛了

自動完成

  • 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
  • vscode-styled-components
  • vscode-styled-jsx: React 開發必備

版本控制

小編比較常使用的是 GitLens 圖像化的話還是比較習慣 SourceTree 不過也推薦 Git Graph

  • GitLens
  • Git Graph
  • Git History

一般用途

  • DotENV: 環境變數
  • TODO Highlight、TODO Tree: 任務標籤
  • Color Highlight: 色碼會幫我們上色
  • JSON Tools

喜歡這篇文章,請幫忙拍拍手喔 🤣

share