vs code 插件收集

時間 2019-11-08

標籤 code 插件收集简体版

原文原文鏈接

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

附錄：我的的VSCode首選項配置（僅供參考）

{
  "editor.tabSize": 2, "files.associations": { "*.vue": "vue" }, "eslint.autoFixOnSave": true, "eslint.options": { "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", "javascriptreact", "vue", "vue-html" ], "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "emmet.syntaxProfiles": { "javascript": "jsx", "vue": "html", "vue-html": "html" }, "git.confirmSync": false, "window.zoomLevel": 0, "vsicons.projectDetection.autoReload": true, "typescript.check.tscVersion": false, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "workbench.colorTheme": "Solarized Light", "workbench.iconTheme": "vscode-great-icons", "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "tslint.autoFixOnSave": true, "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", "beautify.tabSize": 2, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "typescript.extension.sortImports.maxNamedImportsInSingleLine": 5, "typescript.extension.sortImports.omitSemicolon": true, "editor.codeLens": true, "editor.snippetSuggestions": "top", "react-native-storybooks.port": 6006 }
————————————————————————————————————————————————————————————————————————————————————————————————

filesize：在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間javascript

Path Intellisense：文件路徑補全，在你用任何方式引入文件系統中的路徑時提供智能提示和自動完成css

vscode-fileheader：頂部註釋模板，可定義做者、時間等信息，並會自動更新最後修改時間html

Git Lens：查看詳細的git記錄,內置功能不少前端

Git History (git log)：一個好用的Git 歷史查看工具vue

npm: 能夠直接在vscode執行npm的一些命令

Npm Intellisense：NPM 依賴補全，在你引入任何 node_modules 裏面的依賴包時提供智能提示和自動完成java

Debugger for Chrome：讓 vscode 映射 chrome 的 debug功能，靜態頁面均可以用 vscode 來打斷點調試node

JavaScript (ES6) code snippets：經常使用的類聲明、ES 模塊聲明、CMD 模塊導入等python

ESLint：代碼語法檢查mysql

Beautify：格式化代碼的工具react

open-in-browser：在瀏覽器中預覽HTM文件

HTML Snippets：各類 HTML 標籤片斷

IntelliSense for CSS class names：CSS 類名補全，會自動掃描整個項目裏面的 CSS 類名並在你輸入類名時作智能提示

Document This： js 的註釋模板

Settings Sync：同步你得設置和插件

————————————————————————————————————————————————

Code Outline

Code Outline 能在單獨窗口中列出當源代碼中的各類符號，好比變量名、類名、方法名等，並支持快速跳轉，有點相似於 Vim 裏面的 ctags，翻看老代碼、開源項目代碼時很是有用。

編碼效率

效率的極致就是把能自動化的都自動化了，下面 4 個小工具可以極大的消除常見編輯需求裏面的重複工做：

Document This

Document This 可以一鍵給代碼中的類、函數加上註釋，支持函數聲明、函數表達式、箭頭函數等；

Embrace

Embrace 快速的在選中代碼兩邊添加各類引號、括號，不用來回移動光標，不過仍是沒有 Vim 中的 Surrounding 插件強大；

ECMAScript Quoets Transformer

ECMAScript Quotes Transformer 方便在字符串和變量混搭模式（String Concat）的代碼和字符串模板（Template Literals）模式間來回轉換，省去手動的移動光標、修改引號等操做；

Code Spell Checker

Code Spell Checker 強烈推薦，對大部分非英語母語又不想寫出四不像變量名的程序員來講，正確識記拼寫各類單詞仍是有不小的挑戰，比模棱兩可時須要去查在線詞典不一樣的是，這款插件能實時的識別單詞拼寫是否有誤，並給出提示，很多 bug 都是由於拼寫錯誤致使的。

Code Runner

Code Runner，名副其實的代碼運行插件，支持數十種語言，在不離開代碼編輯器的前提下經過命令面板可直接執行代碼，並查看輸出。下面是盜圖：

其餘的配置：關於行末的空格、文件末尾的空行，之前須要使用插件來實現，如今直接修改 VSCode 內置配置便可實現：

{
    "files.trimTrailingWhitespace": true, "files.insertFinalNewline": true, "files.trimFinalNewlines": true }

---------------------------------------------------

Auto Close Tag 自動閉合HTML標籤
Auto Rename Tag 修改HTML標籤時，自動修改匹配的標籤
Bookmarks 添加行書籤
Can I Use HTML五、CSS三、SVG的瀏覽器兼容性檢查
Code Runner 運行選中代碼段（支持大量語言，包括Node）
CodeBing 在VSCode中彈出瀏覽器並搜索，可編輯搜索引擎
Color Highlight 顏色值在代碼中高亮顯示
Color Picker 拾色器
Document This 註釋文檔生成
EditorConfig for VS Code EditorConfig插件
Emoji 在代碼中輸入emoji
ESLint ESLint插件，高亮提示
File Peek 根據路徑字符串，快速定位到文件
Font-awesome codes for html FontAwesome提示代碼段
ftp-sync 同步文件到ftp
Git Blame 在狀態欄顯示當前行的Git信息
Git History(git log) 查看git log
GitLens 顯示文件最近的commit和做者，顯示當前行commit信息
Guides 高亮縮進基準線
Gulp Snippets Gulp代碼段
HTML CSS Class Completion CSS class提示
HTML CSS Support css提示（支持vue）
HTMLHint HTML格式提示
Indenticator 縮進高亮
JavaScript (ES6) code snippets ES6語法代碼段
language-stylus Stylus語法高亮和提示
Lodash Lodash代碼段
markdownlint Markdown格式提示
MochaSnippets Mocha代碼段
Node modules resolve 快速導航到Node模塊
npm 運行npm命令
npm Intellisense 導入模塊時，提示已安裝模塊名稱
Output Colorizer 彩色輸出信息
Partial Diff 對比兩段代碼或文件
Path Autocomplete 路徑完成提示
Path Intellisense 另外一個路徑完成提示
Prettify JSON 格式化JSON
Project Manager 快速切換項目
REST Client 發送REST風格的HTTP請求
Settings Sync VSCode設置同步到Gist
String Manipulation 字符串轉換處理（駝峯、大寫開頭、下劃線等等）
Test Spec Generator 測試用例生成（支持chai、should、jasmine）
TODO Parser Todo管理
Version Lens package.json文件顯示模塊當前版本和最新版本
vetur 目前比較好的Vue語法高亮
View Node Package 快速打開選中模塊的主頁和代碼倉庫
vscode-icons 文件圖標，方便定位文件
VSCode Great Icons 文件圖標拓展
VueHelper Vue2代碼段（包括Vue2 api、vue-router二、vuex2）

附錄：VSCode首選項配置



——————————————————————————————————————————————————————————————

{
    "editor.tabSize": 2, "files.associations": { "*.vue": "vue" }, "eslint.autoFixOnSave": true, "eslint.options": { "extensions": [ ".js", ".vue" ] }, "eslint.validate": [ "javascript", "javascriptreact", "vue", "vue-html" ], "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "emmet.syntaxProfiles": { "javascript": "jsx", "vue": "html", "vue-html": "html" }, "extensions.autoUpdate": true, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "workbench.welcome.enabled": true }

版本及文件管理
- Better Merge : 用來解決文件衝突的不二利器，通過多個版本的更新，穩定不少。。推薦
- Folder Indexing: 提升文件的索引速度[常駐於內存中]，這對於項目比較大的小夥伴必須安裝啊
- Git Indicators: 相似github上的統計提交代碼增減條目，在狀態欄顯示，很小巧實用
- gitk:有了這個，版本實時比對，這個真心好

Angular 2+ && Typescript 2+
- Angular Language Service: 對於用ng2+開發的小夥伴，這又是一個必備插件，定義跳轉，補全，信息提示等。。。
- JSON to TS:有了這個來聲明和後臺協商的對接接口簡直不能再方便了【typescript interface】。。。
- move-imports: 雖然不能說完美無BUG，可是至少常規的遷移[ js, jsx, ts, tsx]是能夠同步改動的，值得安裝

Node
- Node.js Modules Intellisense:對於node_module的智能提示太友好了。。。必裝
- npm: 能夠直接在vscode執行npm的一些命令，至關實用。試試就知道了
- ExpressSnippet: express的代碼片斷,實用推薦
- ES6 Mocha Snippets：單元測試Mocha的代碼片斷

snippet
- TurboJavaScript:至關齊全的js的代碼片斷簡寫，熟練了效率高的不是一點兩點
- Angular 2+ Snippets - TypeScript, Html, ngRx, Angular Flex Layout & Testing: 這貨的代碼片段涵蓋範圍太廣了，真佩服做者去彙總
Vue
- Vue TypeScript Snippets:我發現我偏心ts，vue的ts代碼片斷。。做者在最近的vueconf也提出了v2.4將會引入ts來規範開發
- VueHelper:國人寫的一個針對vue2,router,vuex的代碼提示，涵蓋了大部分的API，投入了不少精力啊，贊一個
- vetur:語法高亮及智能提示

React
- React-Native/React/Redux snippets for es6/es7:這個是比較重量級的插件，並且做者更新很勤快
- Typescript React/Redux Snippets：ts語法的react代碼片斷

nginx

nginx很是適合作前端的服務層，好處太多，反向代理避免跨域,負載均衡
- nginx.conf:高亮nginx的配置文件，可能之後的版本會引入.conf的語法高亮而不須要安裝此插件
- nginx.conf hint:nginx配置文件的智能提示和補全，好很差用你說了算

Theme

有兩個推薦的主題，我我的以爲很耐看的
- bluloco-dark: 顏色很對我眼
- One Dark Pro: Atom主題的vscode版本,做者作了一些調整

——————————————————————————————————————————————————————

代碼質量的把控
- CodeMetrics : 能夠計算TS/JS內代碼的複雜度(好比函數這些),這些與代碼質量和性能是掛鉤的
- Import Cost: 就是你import一個東西的時候,能夠計算改引入模塊的大小!!!厲害吧
- Prettier: 這個東西在github上挺火,能夠支持不少種新框架的格式,高度自定義,因此有人封裝成了插件..實用!(vue,ng,react,jsx,ts)這些格式化毫無壓力
正則
- RegExp Preview and Editor: 這個就厲害了.能夠完美的展現你寫的正則,圖形化給你看你寫正則的造成

版本控制
- Git Lens: 暫時沒有發現比這個看git記錄更爲詳細了,內置功能不少..很方便

CSS相關
- SCSS IntelliSense: scss的智能提示

Vue
- Vue Peek:轉到定義,這個插件就是讓vue也支持這個功能,實用!
- Vue VSCode Snippets: 很全面的vue代碼片斷

React
- Useful React Snippets: React的snippet

Angular 4+
- ng-zorro snippets: ANTD的ng4+版本,阿里發佈的..很精緻的UI框架
- Ionic 3 snippets: ionic3的代碼片斷

Theme
- rocket-ui: 顏色很對我眼

——————————————————————————————————————————————

Node(em....自行理會)

npm Intellisense : 正如標題所說,在寫引入模塊的時候智能提示!!
NPM Smart Importer : 與上個的插件的差別是智能補全,好比你 copy 了一些代碼,而木有引入部分模塊!能夠點擊引入!
NPM Dependency Links : 這個就是方便你在初始化腳手架項目以後想了解某些模塊,點擊直接調到npm 模塊發佈頁面...省去了打開瀏覽器,搜索....
ExpressJs 4 Snippets : 如標題所言,裏面彙總了70個片斷,基本是 ES6的語法的!!
Pug : 這是模板語言的代碼片斷,嚴格來講並不屬於 node,問題這貨基本用於服務端渲染的模板語言,通常和 node 的服務端框架搭配...

Vue/React/Angular

Auto Import - ES6, TS, JSX, TSX: 這個插件是做者在一個長期不更新的項目加以維護的,相似智能補全的,基本跟進主流
React Native Tools: 讓 vscode能夠寫 RN 的插件,包括調試!
TSLint Vue : 讓tslint 支持vue單組件內 ts 的語法

css or scss

css-triggers:這個插件的亮點就是能夠看到渲染的流程和理論...能夠當作參考工具
HTML SCSS Support: scss的智能補全,支持在 html,ng,vue,.net等使用(佈局侷限具體看文檔).
Autoprefixer: 如果基於腳手架的項目基本配置下就行了(不用這個插件)..這個通常用於你想寫點什麼或者維護老項目,能夠省點時間的
CSS Grid Snippets: CSS Grid 的代碼片斷,CSS Grid是下一代的佈局姿式,不過目前兼容性很渣..成爲主流可能要等個三四年,移動端上好一些(但只限於比較新的系統)

tools(雜七雜八的小工具)

Babelrc: 驗證babelrc內的語法格式!!
CodeMap: 能夠理解爲"大綱",支持ts,md,python . 挺實用的
Debugger for Chrome: 更新迭代了那麼久,穩定性已經很不錯了,很是棒的調試工具.用過都說好
Complete JSDoc Tags : 智能提示補全JSDOC的語法
Git Project Manager: 適合有多個git項目的小夥伴,能夠快速跳轉,好比打開文件夾慢慢找快 N 倍
Git Branch Warnings: 一個很舒適的提醒,能夠高亮某個分支提醒你要慎重,這個小功能感受之後會內置
jumpy: 羨慕vim黨,可是不會耍,想快速跳轉到指定位置!這個就能夠...
licenser: 能夠快速生成開源協議的頭部!!,配置本身的用戶名和郵箱等,挺實用的
Bookmarks: 給文件某個位置打標籤,用來快速跳轉的..不知道這個功能到如今爲什麼沒內置!!

Markdown(md 規範的文檔)

爲何單獨抽出來,有好幾個實用的插件...打造好徹底不輸所謂的純 MD 編輯器好麼!!!

Markdown Preview Enhanced: 國人出品的精品插件!!!涵蓋的東西不少,上至公式下至導出(裝了這個其餘都是能夠選裝了),不過你要跟着它提供的文檔把對應的功能點依賴給補齊了..適合願意折騰的
Markdown All in One: 添加了一些內置md 沒有的,好比支持 github的 tasklist,table formatter,還有 TOC 和快捷鍵這些
Markdown+Math: 支持多種數學公式的展現!!
Markdown PDF: 把 MD 轉爲 PDF,支持emoji,checkbox和語法高亮
Markdown Preview Mermaid Support:支持Mermaid規範的流程表生成
Markdown Emoji: 支持 md 插入emoji..可是用起來支持的力度不怎麼夠,不知道做者會不會繼續維護下去..可是常見的emoji是有的