vscode最佳配置

• 新增如何設定螢幕閱讀器優化
• 新增對 Flutter（Dart）的語法支援，配置在最底部
• 最近一次更新時間： 2020.03.22 （vscode V1.39.2）

配置說明詳解

• vscode配置檔案內容在最後，已附上。可直接copy使用
• vue專案，標準格式化規範的eslint檔案附在末尾

editor是針對vscode的風格設定
例如 tabSize：一個tab等於2個空格，行高為24px

workbench是針對vscode的主題設定

例如 iconTheme（ 圖示風格）：使用外掛 vscode-great-icons （需搜尋安裝）

例如 colorTheme（程式碼顏色風格）：使用外掛 One Dark Pro Vivid（需搜尋安裝）

search.exclude 配置vscode中專案中的哪些地方被排除搜尋,避免你每次搜尋結果中都有一大堆無關內容

files.associations 配置檔案關聯，比如(作演示) :

任何 vue 字尾的檔案會被認為是 html 檔案 ，(檢視編輯器右下角可見) 然後 vscode 會用 html 規則匹配 vue 檔案做相應格式化，程式碼提示。
任何 wxss 字尾的檔案會被認為是 css 檔案 ，然後 vscode 會用 css 規則匹配 wxss 檔案，給出載入對應的 css 的屬性排序，rem 自動轉換，格式化等規則

 "files.associations": {
	    "*.vue": "html","*.wxss": "css"
	 }

sync是用於同步vscode配置使用，不用每一次換個電腦都要複製一次配置，避免丟失或者改動，保持一致！

apicloud 是用於同步vscode開發apicloud程式時進行手機wifi真機同步使用，不用資料線即可除錯。

vetur 和prettier和stylus是用於vue開發時的程式碼格式化,程式碼提示.

eslint 是用於程式碼格式化程式碼時，選擇用自己的格式化規則或者標準規則，prettier規則等

filesize在底部狀態列左側，顯示當前檔案大小，沒啥用

Live Server快速啟動一個本地伺服器，注意只對.html和.htm檔案有效。對html檔案點選滑鼠右鍵，選擇open with Live Server

Sublime Text Keymap很多FD習慣使用sublime的一套快捷鍵。

螢幕閱讀器優化,可選項. 此功能是 vscode 專門配合盲人閱讀器而做的貼心選項，對於程式設計師來說也有一定作用( 哈哈哈,可以糾正中式英文發音)：當你的滑鼠懸浮在桌面任何位置，語音朗讀器都會朗讀出來所在位置的內容。一旦在vscode中開啟，那麼底部會顯示如圖所示。具體如何設定在文尾。

vscode外掛安裝

• Atom One Dark Theme 主題
• VSCode Great Icons 圖示主題
• Beautify 美化vscode程式碼
• Bracket Pair Colorizer 每一對括號用不同顏色區別 （括號強迫症必備）
• indent-rainbow 凸顯縮排，讓你的縮排一目瞭然
• Prettier 格式化，使用標準風格，快捷鍵 alt+shift +F
• EditorConfig for VS Code vscode的配置檔案
• cssrem 將css中的px自動轉換為rem.再也不用計算器了（大漠大神推介）
• Code Runner node，python等程式碼不必開命令列即可執行
• Eslint 語法檢測
• GitLens 在程式碼中顯示每一行程式碼的提交歷史
• HTML CSS Support vscode對html，css檔案支援，便於你快速書寫屬性
• Vetur 新增對.vue字尾檔案的快速書寫支援。
• Vue 2 Snippets 快速新建vue頁面（參考我另一篇文章）
• React Native Tools 新增對 React Native專案的支援，快速書寫es6以及jsx
• C/C++ 執行React Native專案時，有些檔案的檢視需要這個
• View In Browser 迅速通過瀏覽器開啟html檔案
• Sublime Text Keymap 啟動sublimeText的快捷鍵配置。vscode上面自有一套快捷鍵設定，個人習慣sublime快捷鍵
• markdownlint 書寫md檔案的預覽外掛
• Path Intellisense 路徑識別苦戰，比如書寫圖片路徑時。遺憾就是，對webpack專案中的路徑別名無法擴充套件
• npm Intellisense 在import語句中，自動填充npm模組。
• language-stylus CSS前處理器，styl字尾檔案的識別擴充套件
• Settings Sync 用於同步vscode配置，多臺電腦一份配置（相對而言配置複雜，可不安裝）
• filesize 在底部狀態列左側，顯示當前檔案大小，還可以點選喲
• Document This 快速生成註釋，注意只對類和函式有效。快捷鍵 Ctrl+Alt+D
• Live Server 快速啟動一個本地伺服器
• Python 新增對.py檔案的支援，畢竟tab與空格的痛苦，寫過python的都知道
• Flutter 2018是 Flutter 最火爆的一年，2019持續爆炸
  

{ // VScode主題配置
  "editor.tabSize": 2,"editor.lineHeight": 24,"editor.renderLineHighlight": "none","editor.renderWhitespace": "none","editor.fontFamily": "Consolas","editor.fontSize": 15,"editor.cursorBlinking": "smooth","editor.multiCursorModifier": "ctrlCmd","editor.snippetSuggestions": "top",// 使用vscode的自動格式化時，有時會把一行過長的程式碼折行。400表示400個字元處折行
  "editor.wordWrapColumn": 400,"editor.wordWrap": "off","editor.quickSuggestions": {
    "other": true,"comments": true,"strings": false
  },"editor.codeActionsOnSave": {
    "source.organizeImport": true
  },// 儲存檔案時，自動格式化
  "editor.formatOnSave": false,// 格式化貼上到檔案內的內容
  "editor.formatOnPaste": false,"terminal.integrated.shell.windows": "C:\\windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe","javascript.suggestionActions.enabled": false,"javascript.updateImportsOnFileMove.enabled": "always","javascript.implicitProjectConfig.experimentalDecorators": true,"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },"workbench.iconTheme": "vscode-great-icons","workbench.startupEditor": "newUntitledFile","workbench.colorTheme": "Dracula Soft","workbench.colorCustomizations": {
    // 設定guide線高亮顏色
    "editorIndentGuide.activeBackground": "#ff0000"
  },// css2rem外掛配置:設定書寫css時，px自動提示轉換為rem的根字型大小，預設值為16
  "cssrem.rootFontSize":100,// 啟用/禁用導航路徑
  "breadcrumbs.enabled": true,// 通過預設瀏覽器開啟html檔案
  "open-in-browser.default": "chrome",// VScode進行檔案搜尋時，不搜尋這些區域。注意：vs已經貼心的預設設定了 node_modules 和 bower_components 資料夾
  "search.exclude": {
    "**/.git": true,"**/.gitignore": true,"**/.svn": true,"**/.DS_Store": true,"**/.idea": true,"**/.vscode": false,"**/yarn.lock": true,"**/tmp": true,"**/dist": true,"**/build": true,},// 配置檔案關聯
  // 比如小程式中的 .wxss 這種檔案，會把它作為css檔案來處理，提供對應的css的語法提示，css的格式化等等。
  "files.associations": {
    "*.wxss": "css","*.cjson": "jsonc","*.wxs": "javascript","*.ts": "typescript","*.vue": "vue","*.dart": "dart"
  },// vscode已經內建了emmet。配置emmet是否啟用tab展開縮寫
  // 這一設定最大作用是：當輸入的文字不屬於Emmet定義的縮寫規則時，依然允許使用Tab鍵進行縮排。此時會提示我自定義的縮寫語句，以及各外掛自定義的縮寫語句.
  "emmet.triggerExpansionOnTab": true,"emmet.showSuggestionsAsSnippets": true,// 配置emmet對哪種檔案型別支援
  "emmet.syntaxProfiles": {
    "vue-html": "html","vue": "html","javascript": "javascriptreact","xml": {
      "attr_quotes": "single"
    }
  },// 在 react 的jsx中新增對emmet的支援
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact","wxml": "html"
  },// 格式化快捷鍵 shirt+alt+F，有時可能需要多按幾次
  // 因為使用 shirt+alt+F進行格式化時，先執行編輯器的格式化規則，然後才會按照eslint和tslit這樣的其他外掛去格式化。
  // 是否開啟eslint檢測
  "eslint.enable": true,// 是否啟用根據eslint配置檔案。檔案儲存時，根據配置檔案進行格式化
  "eslint.autoFixOnSave": true,// eslint配置檔案,修改為你自己電腦上的檔案位置，或者直接刪除
  "eslint.options": {
    "configFile": "D:/worksapce/youxiang-mobile-master/.eslintrc.js","plugins": ["html"]
  },"eslint.validate": [
    "javascript","javascriptreact","html","vue","typescript","typescriptreact"
  ],// 安裝了tslint外掛後，是否啟用該外掛
  "typescript.validate.enable": false,// git是否啟用自動拉取
  "git.autofetch": true,// 配置gitlen中git提交歷史記錄的資訊顯示情況
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,"suppressCommitNotFoundWarning": false,"suppressFileNotUnderSourceControlWarning": false,"suppressGitVersionWarning": false,"suppressLineUncommittedWarning": false,"suppressNoRepositoryWarning": false,"suppressResultsExplorerNotice": false,"suppressShowKeyBindingsNotice": true,"suppressUpdateNotice": true,"suppressWelcomeNotice": false
  },// 是否格式化python檔案
  "python.linting.enabled": false,// 設定埠。開啟apicloud在vscode中的wifi真機同步
  "apicloud.port": "23450",// 設定apicloud在vscode中的wifi真機同步根目錄，預設可不設定
  "apicloud.subdirectories": "/apicloudproject",// 這個設定是全域性的，不可為每種語言配置。
  // 斷點除錯時，遇到斷點，自動顯示除錯檢視。
  "debug.openDebug": "openOnDebugBreak",// 專為dart語言配置
  "[dart]": {
    // snippet ：程式碼片段
    // 儲存檔案時，是否自動格式化程式碼，
    "editor.formatOnSave": true,// 當你輸入特定字元時，是否自動格式化程式碼，(比如輸入 `;` 和 `}`).
		"editor.formatOnType": true,// 在80個字元處畫一條引導線，這個範圍內的dart程式碼將被格式化。
		"editor.rulers": [80],// 禁用與所選內容匹配的單詞的內建突出顯示。如果不這樣做，所選文字的所有例項都將突出顯示，從而影響Dart突出顯示所選變數的精確引用的能力。
		"editor.selectionHighlight": false,// 預設情況下，當處於“程式碼片段模式”（在插入的程式碼中編輯佔位符）時，VS會防止snippets彈出開啟。
    // 如果設定為“false”，則表示允許完成操作開啟，就像不在程式碼段佔位符中
		"editor.suggest.snippetsPreventQuickSuggestions": true,// coding時，VScode會給我們給多提示，在所有的提示選項中會預設選中第一個，這一配置就是表示預設選中哪一項。
		// 預設值為："first"，表示VScode將總是選中第一項
		// （推介） "recentlyUsed" 表示vs code將從程式碼提示中，預先選中最近使用過的項，
		"editor.suggestSelection": "recentlyUsedByPrefix",// 允許使用按<tab>速寫程式碼片段，例如，輸入“for”時，即使完成列表不可見。
		"editor.tabCompletion": "onlySnippets",// 預設情況下，當前的語言沒有程式碼片段提示時，VS Code將使用當前檔案中的你自己寫過的單詞來顯示程式碼片段提示。
    // 這導致程式碼完成在編輯註釋和字串時建議單詞。 此設定將阻止這種情況
    // 對於dart來說最好關閉，對於html和css建議開啟    
    "editor.wordBasedSuggestions": false,// 在檔案底部新增新程式碼行時，強制所有檔案都有一行空格。
		"files.insertFinalNewline": true,}
}

其他功能

在檔案頭新增使用者作者，逼格滿滿，效果如圖

檔案 > 首選項 >使用者程式碼片段>新建全域性程式碼片段，貼上儲存。
測試方法：新建檔案，輸入內容author即可

{
	"使用者資訊": {
		// prefix: 在編輯器中輸入 author 時，編輯器建議中會顯示該片段。
		"prefix": "author",// TM_FILENAME_BASE: 當前檔名
		// CURRENT_YEAR：年（4位數） CURRENT_YEAR_SHORT：年（2位數） CURRENT_MONTH：月 CURRENT_DATE：日 
		// CURRENT_HOUR：小時 CURRENT_MINUTE ：分鐘 CURRENT_SECOND：秒
		"body": [
			"/*","* @module ${TM_FILENAME_BASE}","* @author : ifredom","* @description : ifredom是一位FD.","* @since : 建立時間 ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}","*/",""
		],// 描述說明，在片段說明中會顯示此欄位的文字內容。
		"description": "Insert description."
	}
}

Screen Reader（螢幕閱讀器）

只支援windows7以上作業系統，不支援mac.

可用可不用，作為練習英語聽力的小玩具.

首先下載並安裝軟體，Nvda,需要的pass: he2m
安裝完成此軟體後啟動。在vscode中配置項editor.quickSuggestions決定是否開啟.

vue專案，標準格式化規範

.eslintrc.js

到此這篇關於vscode 前端最佳配置小結的文章就介紹到這了,更多相關vscode 前端最佳配置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！