讓你 VS Code 編輯器 與眾不同
有關VSCode快捷鍵大全，請參考我的文章《VSCode編輯器快捷鍵大全》
裝逼如風，常伴吾身
| 名稱 | 描述 |
|---|---|
| Auto Close Tag | 自動閉合HTML標籤 |
| Auto Import | import提示 |
| Auto Rename Tag | 修改HTML標籤時，自動修改匹配的標籤 |
| Airbnb react snippets | react編碼規範 |
| AutoFileName | 自動補全文字名 |
| 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 Runner | 執行選中程式碼段（支援多數語言） |
| Code Spell checker | 單詞拼寫檢查 |
| CodeBing | 快速開啟Bing並搜尋，可配置搜尋引擎 |
| Color Highlight | 顏色值在程式碼中高亮顯示 |
| Color Info | 小視窗顯示顏色，rgb,hsl,cmyk,hex等等 |
| Color Picker | 拾色器 |
| CSS-in-JS | CSS-in-JS高亮提示和轉換 |
| Chinese (Simplified) Language Packfor Visual Studio Code | 載入中文語言包 |
| Dash | 整合Dash |
| Debugger for Chrome | 除錯Chrome |
| Document This | 註釋文件生成 |
| DotENV | .env檔案高亮 |
| EditorConfig for VS Code | EditorConfig外掛 |
| Emoji | 在程式碼中輸入emoji |
| endy | 將輸入游標跳轉到當前行最後面 |
| ESLint | ESLint外掛，高亮提示 |
| VS Code ES7 React/Redux/React-Native/JS snippets | react全家桶 |
| 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資訊 |
| Guides | 高亮縮排基準線 |
| Gulp Snippets | Gulp程式碼段 |
| HTML CSS Class Completion | CSS calss提示 |
| HTML CSS Support | css提示（支援vue） |
| HTMLHint | 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程式碼段 |
| Laravel goto view | 點選路徑跳轉 |
| Live Server | 實時預覽,修改效果同步到瀏覽器，不用手動重新整理 |
| MochaSnippets | Mocha程式碼段 |
| markdownlint | Markdown格式提示 |
| minapp | 微信小程式標籤、屬性的智慧補全,同時支援原生小程式、mpvue 和 wepy 框架，並提供 snippets) |
| Node modules resolve | 快速導航到Node模組 |
| npm | 執行npm命令 |
| npm Intellisense | 匯入模組時，提示已安裝模組名稱 |
| Output Colorizer | 彩色輸出資訊 |
| Partial Dif | Partial Dif |
| Path Autocomplete | 路徑完成提示 |
| Path Intellisense | 另一個路徑完成提示 |
| Polacode | 將程式碼生成圖片 |
| PostCss Sorting | css排序 |
| 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檢視器 |
| TS/JS postfix completion | ts/js字尾提示 |
| TSLint | TypeScript語法檢查 |
| TODO Highlight | 在程式碼處做標記，方便以後快速定位到程式碼行 |
| 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） |
| View In Browser | 瀏覽器中檢視 |
| Vetur-wepy | 新增對wepy框架的.wpy字尾支援 |
| vscode wxml | VSCode 提供 wxml 語法支援及程式碼片段 |
| Wallaby.js | 實時測試外掛 |
| wpy-beautify | 格式化(.wpy/.vue)檔案 |
| dart | Flutter開發核心外掛，該外掛包含用於在不同資料表示之間轉換的編碼器和解碼器 |
| flutter | Flutter語法提示高亮 |
| vscode-icons | 好看的文字圖示 |
| Nunjucks、Nunjucks Snippets、Nunjucks Template Formatter | NJK模板格式化外掛 |
配置ESLint風格格式化程式碼
在用vsCode時有沒有遇到過格式化程式碼後，但是ESLint檢查卻出錯了。
這就是他們之間的風格不匹配導致的。
怎麼解決呢？很簡單
開啟vsCode中的：檔案-->首選項-->設定，在介面右上角有一個開啟設定(json)，開啟它，把下面的程式碼複製貼上到裡面就好了(注意大括號)。
然後當你在編輯程式碼後，按Ctrl+S儲存後，會自動的格式化你的程式碼為ESLint風格的，和所有格式化程式碼風格錯誤說拜拜。
{
// #vsCode預設啟用了根據檔案型別自動設定tabsize的選項
"editor.detectIndentation": false,
// #重新設定tabsize
"editor.tabSize": 2,
// #每次儲存的時候自動格式化
"editor.formatOnSave": true,
// #每次儲存的時候將程式碼按eslint格式進行修復
"eslint.autoFixOnSave": true,
// #新增 vue 支援
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #讓prettier使用eslint的程式碼格式進行校驗
"prettier.eslintIntegration": true,
// #去掉程式碼結尾的分號
"prettier.semi": false,
// #使用單引號替代雙引號
"prettier.singleQuote": true,
// #讓函式(名)和後面的括號之間加個空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個按使用者自身習慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue元件中html程式碼格式化樣式
}
},
// #格式化stylus, 需安裝Manta's Stylus Supremacy外掛
"stylusSupremacy.insertColons": false, // 是否插入冒號
"stylusSupremacy.insertSemicolons": false, // 是否插入分號
"stylusSupremacy.insertBraces": false, // 是否插入大括號
"stylusSupremacy.insertNewLineAroundImports": false, // import之後是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false // 兩個選擇器中是否換行
}
複製程式碼