1.編輯器 - Visual Studio Code

1. 配置

默認字體

Fira Code

顏色主題

Solarized Dark

目錄圖表集

vscode-great-icons

User Settings

{
    "files.autoSave": "afterDelay", //短暫延遲後自動保存
    
    "editor.fontFamily": "Fira Code", //默認字體
    "editor.fontSize": 13, //字體大小
    "editor.lineHeight": 22, //字體行高
    
    "workbench.colorTheme": "Solarized Dark", //顏色主題
    "workbench.iconTheme": "vscode-great-icons", //目錄圖標集
    
    "fileheader.Author": "[name]", //頭部註釋插件默認做者
    "fileheader.LastModifiedBy": "[name]", //頭部註釋插件默認修改者
}
複製代碼

2. 前端插件

Auto Close Tag - 自動關閉標籤

Auto Import - 自動導入包

Auto Rename Tag - 自動重命名標籤尾

Babel JavaScript - ES6/React 語法高亮

Beautify - 代碼美化

Bookmarks - 單行添加標籤

Bracket Pair Colorizer - 符號組着色

Can I Use - 兼容性顯示

Code Spell Checker - 單詞拼寫檢測

Color Highlight - 顏色高亮

Color Picker - 顏色選擇

CSS Peek - 樣式定位

CSS-in-JS - js 中 css 提示

cssrem - css 轉 rem

Debugger for Chrome - Chrome 調試器

Document This - js 文件註釋

ESLint - js 語法檢測

filesize - 文件大小顯示

Git Blame - Git 序列號顯示

Git History - Git 提交記錄

GitLens — Git supercharged - 每行提交記錄

HTML CSS Support - 樣式提示

HTML Snippets - HTML 代碼片斷提示

HTMLHint - HTML 語法檢測

htmltagwrap - HTML 標籤包裹

JavaScript (ES6) code snippets - ES6/React 代碼片斷提示

jQuery Code Snippets - jQuery 代碼片斷提示

markdownlint - md 語法檢測

npm - npm 擴展插件

open in browser - 用瀏覽器打開

Path Intellisense - 路徑自動補全

Prettier - Code formatter - 代碼格式化

Regex Previewer - 正則實時測試

stylelint - 樣式語法檢測

Sublime Babel - Babel 高亮補丁

SVG Viewer - SVG 預覽

TODO Highlight - TODO 註釋高亮

TSLint - TS 語法檢測

VSCode Great Icons - 目錄圖標集

vscode-faker - 模擬數據生成

vscode-fileheader - 文件頭部註釋