VSCode拓展推薦（前端開發）

 

一、食用說明

• 相似功能的插件，不推薦全都裝上，請挑選一個使用
• 本列表所有插件均已測試使用過，但不代表不存在問題
• 任何插件本身的問題，請到對於代碼倉庫提交issue

二、拓展

名稱	簡述
Auto Close Tag	自動閉合HTML標籤
Auto Import	import提示
Auto Rename Tag	修改HTML標籤時，自動修改匹配的標籤
Babel JavaScript	babel插件，語法高亮
Babelrc	.babelrc文件高亮提示
Beautify css/sass/scss/less	css/sass/less格式化
Better Align	對齊賦值符號和註釋
Better Comments	編寫更加人性化的註釋
Bookmarks	添加行書籤
Bracket Pair Colorizer	用不同顏色高亮顯示匹配的括號
Can I Use	HTML5、CSS3、SVG的瀏覽器兼容性檢查
Code Outline	展示代碼結構樹
Code Runner	運行選中代碼段（支持多數語言）
Code Spell checker	單詞拼寫檢查
CodeBing	快速打開Bing並搜索，可配置搜索引擎
Color Highlight	顏色值在代碼中高亮顯示
Color Info	小窗口顯示顏色值，rgb,hsl,cmyk,hex等等
Color Picker	拾色器
CSS-in-JS	CSS-in-JS高亮提示和轉換
Dash	集成Dash
Debugger for Chrome	調試Chrome
Document This	註釋文檔生成
DotENV	.env文件高亮
EditorConfig for VS Code	EditorConfig插件
Emoji	在代碼中輸入emoji
endy	將輸入光標跳轉到當前行最後面
ESLint	ESLint插件，高亮提示
File Peek	根據路徑字符串，快速定位到文件
filesize	狀態欄顯示當前文件大小
Find-Jump	快速跳轉到指定單詞位置
Font-awesome codes for html	FontAwesome提示代碼段
ftp-sync	同步文件到ftp
Git Blame	在狀態欄顯示當前行的Git信息
Git History(git log)	查看git log
gitignore	.gitignore文件語法
GitLens	顯示文件最近的commit和作者，顯示當前行commit信息
GraphQL for VSCode	graphql高亮和提示
Guides	高亮縮進基準線
Gulp Snippets	Gulp代碼段
HTML CSS Class Completion	CSS class提示
HTML CSS Support	css提示（支持vue）
HTMLHint	HTML格式提示
htmltagwrap	快捷包裹html標籤
htmltagwrap	包裹HTML
Import Beautify	import分組、排序、格式化
Import Cost	行內顯示導入（import/require）的包的大小
Indenticator	縮進高亮
IntelliSense for css class names	css class輸入提示
JavaScript (ES6) code snippets	ES6語法代碼段
JavaScript Standard Style	Standard風格
JS Refactor	代碼重構工具，提取函數、變量重命名等等
JSON to TS	JSON結構轉化爲typescript的interface
JSON Tools	格式化和壓縮JSON
jumpy	快速跳轉到指定單詞位置
language-stylus	Stylus語法高亮和提示
Less IntelliSense	less變量與混合提示
Lodash	Lodash代碼段
Log Wrapper	生產打印選中變量的代碼
markdownlint	Markdown格式提示
MochaSnippets	Mocha代碼段
Node modules resolve	快速導航到Node模塊
npm	運行npm命令
npm Intellisense	導入模塊時，提示已安裝模塊名稱
Output Colorizer	彩色輸出信息
Partial Diff	對比兩段代碼或文件
Path Autocomplete	路徑完成提示
Path Intellisense	另一個路徑完成提示
Polacode	將代碼生成圖片
PostCss Sorting	css排序
Prettier - Code formatter	prettier官方插件
Prettify JSON	格式化JSON
Project Manager	快速切換項目
Quokka.js	不需要手動運行，行內顯示變量結果
React Native Storybooks	storybook預覽插件，支持react
React Playground	爲編輯器提供一個react組件運行環境，方便調試
React Standard Style code snippets	react standar風格代碼塊
REST Client	發送REST風格的HTTP請求
Sass	sass插件
Settings Sync	VSCode設置同步到Gist
Sort lines	排序選中行
Sort Typescript Imports	typescript的import排序
String Manipulation	字符串轉換處理（駝峯、大寫開頭、下劃線等等）
stylelint	css/sass/less代碼風格
SVG Viewer	SVG查看器
Syncing	vscode設置同步到gist
Test Spec Generator	測試用例生成（支持chai、should、jasmine）
TODO Parser	Todo管理
TS/JS postfix completion	ts/js後綴提示
TSLint	TypeScript語法檢查
Types auto installer	自動安裝@types聲明依賴
TypeScript Hero	TypeScript輔助插件，管理import、outline等等
TypeScript Import	TS自動import
TypeScript Import Sorter	import整理排序
Typescript React code snippets	React Typescript代碼段
TypeSearch	TS聲明文件搜索
Version Lens	package.json文件顯示模塊當前版本和最新版本
vetur	目前比較好的Vue語法高亮
View Node Package	快速打開選中模塊的主頁和代碼倉庫
VS Live Share	實時多人協助
VSCode Great Icons	文件圖標拓展
vscode-database	操作數據庫，支持mysql和postgres
vscode-icons	文件圖標，方便定位文件
vscode-random	隨機字符串生成器
vscode-spotify	集成spotify，播放音樂
vscode-styled-components	styled-components高亮支持
vscode-styled-jsx	styled-jsx高亮支持
Vue TypeScript Snippets	Vue Typescript代碼段
VueHelper	Vue2代碼段（包括Vue2 api、vue-router2、vuex2）
Wallaby.js	實時測試插件

三、主題

名稱	預覽
Atom One Light Theme
bluloco-dark
bluloco-light
Enki Theme
eppz! (C# theme for Unity)
Eva Theme
Flat UI
Monokai Pro
New Moon VSCode
One Dark Pro
Plastic
spacegray-vscode
Splus

四、個人首選項配置（僅供參考）

{
  "breadcrumbs.enabled": true,
  "editor.tabSize": 2,
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "editor.minimap.renderCharacters": false,
  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  "editor.fontLigatures": true,
  "explorer.confirmDragAndDrop": false,
  "extensions.autoUpdate": false,
  "files.insertFinalNewline": true,
  "git.autofetch": true,
  "git.path": "F:\\Program Files\\Git\\cmd\\git.exe",
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  },
  "typescript.locale": "en",
  "window.titleBarStyle": "custom",
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  "window.zoomLevel": 1,
  "workbench.activityBar.visible": true,
  "workbench.colorTheme": "Plastic - deprioritised punctuation",
  "workbench.iconTheme": "vscode-great-icons",
  "workbench.startupEditor": "newUntitledFile",
  "eslint.autoFixOnSave": true,
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "vsicons.projectDetection.autoReload": true,
  "vsicons.dontShowNewVersionMessage": true,
  "tslint.autoFixOnSave": true,
  "debugwrapper.wrappers": {
    "default": "console.log('$eSEL', $SEL)"
  },
  "prettier.tslintIntegration": true,
  "cSpell.userWords": [
    "Unmount"
  ],
  "jest.autoEnable": false,
}

 

 

轉自：https://github.com/varHarrie/varharrie.github.io/issues/10