vscode 前端最佳配置小結(jié)

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

{ // 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的自動(dòng)格式化時(shí)，有時(shí)會把一行過長的代碼折行。400表示400個(gè)字符處折行
  "editor.wordWrapColumn": 400,
  "editor.wordWrap": "off",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": false
  },
  "editor.codeActionsOnSave": {
    "source.organizeImport": true
  },
  // 保存文件時(shí)，自動(dòng)格式化
  "editor.formatOnSave": false,
  // 格式化粘貼到文件內(nèi)的內(nèi)容
  "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": {
    // 設(shè)置guide線高亮顏色
    "editorIndentGuide.activeBackground": "#ff0000"
  },
  // css2rem插件配置:設(shè)置書寫css時(shí)，px自動(dòng)提示轉(zhuǎn)換為rem的根字體大小，默認(rèn)值為16
  "cssrem.rootFontSize":100,
  // 啟用/禁用導(dǎo)航路徑
  "breadcrumbs.enabled": true,
  // 通過默認(rèn)瀏覽器打開html文件
  "open-in-browser.default": "chrome",
  // VScode進(jìn)行文件搜索時(shí)，不搜索這些區(qū)域。注意：vs已經(jīng)貼心的默認(rèn)設(shè)置了 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,
  },
  // 配置文件關(guān)聯(lián)
  // 比如小程序中的 .wxss 這種文件，會把它作為css文件來處理，提供對應(yīng)的css的語法提示，css的格式化等等。
  "files.associations": {
    "*.wxss": "css",
    "*.cjson": "jsonc",
    "*.wxs": "javascript",
    "*.ts": "typescript",
    "*.vue": "vue",
    "*.dart": "dart"
  },
  // vscode已經(jīng)內(nèi)置了emmet。配置emmet是否啟用tab展開縮寫
  // 這一設(shè)置最大作用是：當(dāng)輸入的文本不屬于Emmet定義的縮寫規(guī)則時(shí)，依然允許使用Tab鍵進(jìn)行縮進(jìn)。此時(shí)會提示我自定義的縮寫語句，以及各插件自定義的縮寫語句.
  "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，有時(shí)可能需要多按幾次
  // 因?yàn)槭褂?shirt+alt+F進(jìn)行格式化時(shí)，先執(zhí)行編輯器的格式化規(guī)則，然后才會按照eslint和tslit這樣的其他插件去格式化。
  // 是否開啟eslint檢測
  "eslint.enable": true,
  // 是否啟用根據(jù)eslint配置文件。文件保存時(shí)，根據(jù)配置文件進(jìn)行格式化
  "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是否啟用自動(dòng)拉取
  "git.autofetch": true,
  // 配置gitlen中g(shù)it提交歷史記錄的信息顯示情況
  "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,
  // 設(shè)置端口。開啟apicloud在vscode中的wifi真機(jī)同步
  "apicloud.port": "23450",
  // 設(shè)置apicloud在vscode中的wifi真機(jī)同步根目錄，默認(rèn)可不設(shè)置
  "apicloud.subdirectories": "/apicloudproject",
  // 這個(gè)設(shè)置是全局的，不可為每種語言配置。
  // 斷點(diǎn)調(diào)試時(shí)，遇到斷點(diǎn)，自動(dòng)顯示調(diào)試視圖。
  "debug.openDebug": "openOnDebugBreak",
  // 專為dart語言配置
  "[dart]": {
    // snippet ：代碼片段
    // 保存文件時(shí)，是否自動(dòng)格式化代碼，
    "editor.formatOnSave": true,
		// 當(dāng)你輸入特定字符時(shí)，是否自動(dòng)格式化代碼，(比如輸入 `;` 和 `}`).
		"editor.formatOnType": true,

		// 在80個(gè)字符處畫一條引導(dǎo)線，這個(gè)范圍內(nèi)的dart代碼將被格式化。
		"editor.rulers": [80],

		// 禁用與所選內(nèi)容匹配的單詞的內(nèi)置突出顯示。如果不這樣做，所選文本的所有實(shí)例都將突出顯示，從而影響Dart突出顯示所選變量的精確引用的能力。
		"editor.selectionHighlight": false,

    // 默認(rèn)情況下，當(dāng)處于“代碼片段模式”（在插入的代碼中編輯占位符）時(shí)，VS會防止snippets彈出打開。
    // 如果設(shè)置為“false”，則表示允許完成操作打開，就像不在代碼段占位符中
		"editor.suggest.snippetsPreventQuickSuggestions": true,

    // coding時(shí)，VScode會給我們給多提示，在所有的提示選項(xiàng)中會默認(rèn)選中第一個(gè)，這一配置就是表示默認(rèn)選中哪一項(xiàng)。
		// 默認(rèn)值為："first"，表示VScode將總是選中第一項(xiàng)
		// （推介） "recentlyUsed" 表示vs code將從代碼提示中，預(yù)先選中最近使用過的項(xiàng)，
		"editor.suggestSelection": "recentlyUsedByPrefix",

		// 允許使用按tab>速寫代碼片段，例如，輸入“for”時(shí)，即使完成列表不可見。
		"editor.tabCompletion": "onlySnippets",

		// 默認(rèn)情況下，當(dāng)前的語言沒有代碼片段提示時(shí)，VS Code將使用當(dāng)前文件中的你自己寫過的單詞來顯示代碼片段提示。
    // 這導(dǎo)致代碼完成在編輯注釋和字符串時(shí)建議單詞。 此設(shè)置將阻止這種情況
    // 對于dart來說最好關(guān)閉，對于html和css建議開啟    
    "editor.wordBasedSuggestions": false,

		// 在文件底部添加新代碼行時(shí)，強(qiáng)制所有文件都有一行空格。
		"files.insertFinalNewline": true,
  }
}

{
	"用戶信息": {
		// prefix: 在編輯器中輸入 author 時(shí)，編輯器建議中會顯示該片段。
		"prefix": "author",
		// TM_FILENAME_BASE: 當(dāng)前文件名
		// CURRENT_YEAR：年（4位數(shù)） CURRENT_YEAR_SHORT：年（2位數(shù)） CURRENT_MONTH：月 CURRENT_DATE：日 
		// CURRENT_HOUR：小時(shí) CURRENT_MINUTE ：分鐘 CURRENT_SECOND：秒
		"body": [
			"/*",
			"* @module ${TM_FILENAME_BASE}",
			"* @author : ifredom",
			"* @description : ifredom是一位FD.",
			"* @since : 創(chuàng)建時(shí)間 ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			"*/",
			""
		],
		// 描述說明，在片段說明中會顯示此字段的文本內(nèi)容。
		"description": "Insert description."
	}
}