vs code 插件收集

時間  2020-10-18
標籤 javascript css html 前端 vue java node python mysql react 欄目 JavaScript 简体版
原文   原文鏈接
名稱 簡述
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

 

Path Intellisense

 

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

fileheader

 

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

Git Lens

 

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

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

 

 

**npm**

 

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

 

Npm Intellisense

 

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

**Debugger for Chrome**

 

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 的註釋模板

Document This

 

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]是能夠同步改動的，值得安裝
      •  
        
     
    •  
      
 
       
       
       
      
     
       
  •  
    nginx
     
        
     
         
    nginx很是適合作前端的服務層，好處太多，反向代理避免跨域,負載均衡
     
        
     
        
       
         
    • nginx.conf:高亮nginx的配置文件，可能之後的版本會引入.conf的語法高亮而不須要安裝此插件
      •  
         
    • nginx.conf hint:nginx配置文件的智能提示和補全，好很差用你說了算
      •  
        
     
    •  
      
 
      
     
       
  •  
    Theme
     
        
     
         
    有兩個推薦的主題，我我的以爲很耐看的
     
        
     
         
    •  
      
 
     
 
     
—————————————————————————————————————————————————————— 
    
 
    

        
    
 
   
 
  
 
  
 
   
 
    
 
     
     
      
  •  
    代碼質量的把控
     
       
       
        
    • CodeMetrics : 能夠計算TS/JS內代碼的複雜度(好比函數這些),這些與代碼質量和性能是掛鉤的
      •  
        
    • Import Cost: 就是你import一個東西的時候,能夠計算改引入模塊的大小!!!厲害吧
      •  
        
    • Prettier: 這個東西在github上挺火,能夠支持不少種新框架的格式,高度自定義,因此有人封裝成了插件..實用!(vue,ng,react,jsx,ts)這些格式化毫無壓力
      •  
       
     
    •  
      
  •  
    正則
     
        
    •  
     
 
     
     
      
  •  
    版本控制
     
       
       
        
    • Git Lens: 暫時沒有發現比這個看git記錄更爲詳細了,內置功能不少..很方便
      •  
       
     
    •  
     
 
      
      
      
      
      
    
 
    
—————————————————————————————————————————————— 
   
 
   
 
    
 
     
 
       
      
Node(em....自行理會)
 
      
     
       
  • npm Intellisense : 正如標題所說,在寫引入模塊的時候智能提示!!
    •  
       
  • NPM Smart Importer : 與上個的插件的差別是智能補全,好比你 copy 了一些代碼,而木有引入部分模塊!能夠點擊引入!
    •  
       
  • NPM Dependency Links : 這個就是方便你在初始化腳手架項目以後想了解某些模塊,點擊直接調到npm 模塊發佈頁面...省去了打開瀏覽器,搜索....
    •  
       
  • ExpressJs 4 Snippets : 如標題所言,裏面彙總了70個片斷,基本是 ES6的語法的!!
    •  
       
  • Pug : 這是模板語言的代碼片斷,嚴格來講並不屬於 node,問題這貨基本用於服務端渲染的模板語言,通常和 node 的服務端框架搭配...
    •  
      
 
      
 
       
      
Vue/React/Angular
 
       
      
 
       
      
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是有的
    •  
      
 
      
 
       
      
DATABASES(數據庫)
 
      
 
       
對於喜歡命令行的,也有三個推薦的,針對 SQL SERVER,MYSQL,MongoDB
 
      
 
      
     
       
  • MySQL: 操做 MYSQL
    •  
       
  • MongoDB: 操做 MongoDB
    •  
       
  • mssql: 操做 SQLSERVER,還內置了智能提示(針對T-SQL類的)..微軟自家出品,必屬精品!!
    •  
      
 
      
 
       
      
Python
 
      
 
       
py大法好,但只是粗淺的瞭解過一段時間,忘的差很少了..有機會再入坑試試
 
      
 
      
     
       
  • Python: 微軟自家出品,必輸精通,裝上這個後vscode寫 python 體驗仍是挺不錯的
    •  
       
  • MagicPython: 戴上Magic,有人喜歡有人討厭,看人吧..針對python魔術方法還有新特性的插件.好很差你說了算
    •  
      
 
      
 
       
      
Mac TouchBar(MBP 的觸摸條)
 
       
      
 
       
      
Theme or highlight(主題或高亮)
 
       
     
 
     
———————————————————————————————————————————————————— 
    
 
    
 
     
 
      
調試工具
 
       
      
智能提示及格式化
 
      
     
       
  • Paste JSON as Code: JSON概要快速轉換爲其餘語言的類型格式!(quick-type)
    •  
       
  • Copy With Imports: 至關牛逼的插件,複製部分引用代碼自動引入相關依賴...
    •  
      
 
      
代碼片斷
 
       
      
高亮
 
      
     
       
  • Marko Syntax Highlighting: ebay 旗下Marko的語法高亮..挺有意思的一個類模板語言的 UI 庫
    •  
       
  • YAML: yaml的高亮,校驗及格式化
    •  
      
 
      
圖形化操做
 
      
     
       
  • NPM-Scripts: 在側邊欄可視化執行 npm 命令(項目內的 package.json),小巧實用
    •  
       
  • File Tree View: 提供幾個常見編程語言的函數或狀態的樹集合展現,能夠快速點擊跳轉!!
    •  
       
  • JavaScript Test Runner Preview : 快速執行單元測試,支持 Mocha 和 Jest
    •  
      
 
      
語言或框架
 
      
     
       
  • OCaml and Reason IDE: 兩種語言的支持,後者 facebook 出的(有興趣的能夠去了解,挺超前)
    •  
      
 
      
 
       
      
協做
 
      
     
       
  • GitLab Workflow: Gitlab 的快速管理工具
    •  
       
  • VS Live Share Preview: 牛逼哄哄的插件,實時協做..目前是預覽版...等正式版了再專門抽時間寫一篇這個的用法
    •  
      
 
      
 
       
      
主題
 
       
     
 
    
 
   
 
  
  
 
 



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程