Visual Studio Code Extensions React 前端常用編輯器套件推薦

me
林彥成
2019-06-25 | 1 min.
文章目錄
  1. 1. 為什麼需要使用 Extensions?
  2. 2. 自動完成
  3. 3. 加強防呆
  4. 4. 排版、Syntax highlighting
  5. 5. 伺服器、後端相關

編輯器 Atom 出現後,微軟也推出 VS code,相關外掛也越來越完整。身為一個前端工程師有一些想推薦給大家。

為什麼需要使用 Extensions?

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

自動完成

  • Auto Close Tag: 寫網頁或是 jsx 的時候很方便,可以少打很多東西。
  • Path Intellisense: 引入檔案的時候,如果資料都有照邏輯擺,那這個就能加速找檔案過程。
  • SCSS IntelliSense: 協助寫一些像是 @include 的語法。
  • Reactjs code snippets: 較新的語法可能未支援,優點打 rccp 就可以自動完成元件架構。
  • HTML Snippets: 有時候在切單純一頁 html 的時候好用,可以少做很多事情。

加強防呆

  • Code Spell Checker: 常常英文拼錯但人腦還是可以辨識,所以改錯字就只能靠外掛了。
  • ESLint: 若搭配安裝 airbnb 提供的相關配置,就能夠把部分的 Coding style 還有協助不好寫法的工作交給 airbnb 團隊了。
  • Sass Lint
  • markdownlint

排版、Syntax highlighting

  • Sass
  • DotENV: 環境變數
  • Babel JavaScript: 只要是寫比較流行的框架或函式庫大概都無法避開。
  • vscode-styled-jsx: React 開發必備。
  • TODO Highlight: 有寫過 Java 的話應該很熟悉這就是 Eclipse 的任務標籤。
  • Color Highlight: 色碼會幫我們上色。
  • Beautify css/sass/scss/less
  • Stylesheet Formatter
  • JSON Tools

伺服器、後端相關

  • Apache Conf
  • Apache Conf Snippets
  • nginx.conf
  • nginx-formatter
  • Swagger Viewer
  • YAML

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

share