讓你 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 // 兩個選擇器中是否換行
}
複製程式碼

^_<