VS Code配置及插件推薦

wpw 發(fā)布于2019-08-20 14:42 / 1944人閱讀

摘要：宋體以像素為單位控制字號(hào)。將其設(shè)置為可隱藏窗格。是否已啟用自動(dòng)刷新是否啟用自動(dòng)拉取以像素為單位控制終端的字號(hào)，這是的默認(rèn)值。要求工作區(qū)使用高于版本的。

用戶設(shè)置

打開文件 > 首選項(xiàng) > 用戶設(shè)置(U)，（忽略覆蓋工作區(qū)提示）

{
  // 一個(gè)制表符等于的空格數(shù)。該設(shè)置在 `editor.detectIndentation` 啟用時(shí)根據(jù)文件內(nèi)容進(jìn)行重寫。
  "editor.tabSize": 2,
  "editor.lineHeight": 24,
  "editor.renderLineHighlight": "none",
  "editor.renderWhitespace": "none",
  // 控制字體系列。
  "editor.fontFamily": ""Fira Code", Consolas, "Courier New", monospace,"宋體"",
  "editor.fontLigatures": true,
  // 以像素為單位控制字號(hào)。
  "editor.fontSize": 14,
  "editor.cursorBlinking": "smooth",
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  // 控制選取范圍是否有圓角
  "editor.roundedSelection": false,
  // 建議小組件的字號(hào)
  "editor.suggestFontSize": 16,
  // 是否允許自定義的snippet片段提示,比如自定義的vue片段開啟后就可以智能提示
  "editor.snippetSuggestions": "top",
  "editor.quickSuggestions": {
    "strings": true
  },
  // 執(zhí)行文字相關(guān)的導(dǎo)航或操作時(shí)將用作文字分隔符的字符
  "editor.wordSeparators": "./()"":,.;<>~!@#$%^&*|+=[]{}`~?",
  // 在“打開的編輯器”窗格中顯示的編輯器數(shù)量。將其設(shè)置為 0 可隱藏窗格。
  "explorer.openEditors.visible": 0,
  "git.path": "D:/Program Files/Git/bin/git.exe",
  // 是否已啟用自動(dòng)刷新
  "git.autorefresh": true,
  // git是否啟用自動(dòng)拉取
  "git.autofetch": false,
  // 以像素為單位控制終端的字號(hào)，這是 editor.fontSize 的默認(rèn)值。
  "terminal.integrated.fontSize": 14,
  // 控制終端游標(biāo)是否閃爍。
  "terminal.integrated.cursorBlinking": true,
  "workbench.startupEditor": "newUntitledFile",
  "workbench.iconTheme": "eq-material-theme-icons-palenight",
  "workbench.colorTheme": "Material Theme Palenight High Contrast",
  "materialTheme.fixIconsRunning": false,
  "html.suggest.angular1": false,
  "html.suggest.ionic": false,
  "files.trimTrailingWhitespace": true,
  // VScode 文件搜索區(qū)域配置
  "search.exclude": {
    "**/dist": true,
    "**/build": true,
    "**/elehukouben": true,
    "**/.git": true,
    "**/.gitignore": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true
  },
  // 排除文件搜索區(qū)域，比如node_modules(貼心的默認(rèn)設(shè)置已經(jīng)屏蔽了)
  "files.exclude": {
    "**/.idea": true,
    "**/yarn.lock": true,
    "**/tmp": true
  },
  // 配置文件關(guān)聯(lián)，以便啟用對(duì)應(yīng)的智能提示，比如wxss使用css
  "files.associations": {
    "*.vue": "vue",
    "*.wxss": "css"
  },
  // 配置emmet是否啟用tab展開縮寫
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet對(duì)文件類型的支持，比如vue后綴文件按照html文件來(lái)進(jìn)行emmet擴(kuò)寫
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    // xml類型文件默認(rèn)都是單引號(hào)，開啟對(duì)非單引號(hào)的emmet識(shí)別
    "xml": {
      "attr_quotes": "single"
    }
  },
  // 在react的jsx中添加對(duì)emmet的支持
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact"
  },
  // 是否開啟eslint檢測(cè)
  "eslint.enable": true,
  // 文件保存時(shí)，是否自動(dòng)根據(jù)eslint進(jìn)行格式化
  "eslint.autoFixOnSave": true,
  // eslint配置文件
  "eslint.options": {
    "plugins": [
      "html",
      "javascript",
      {
        "language": "vue",
        "autoFix": true
      },
      "vue"
    ]
  },
  // eslint能夠識(shí)別的文件后綴類型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "html",
      "autoFix": true
    },
    "typescript",
    "typescriptreact"
  ],
  // 快捷鍵方案,使用sublime的一套快捷鍵
  "sublimeTextKeymap.promptV3Features": true,
  // 格式化快捷鍵 shirt+alt+F
  // prettier進(jìn)行格式化時(shí)是否安裝eslint配置去執(zhí)行，建議false
  "prettier.eslintIntegration": true,
  //分號(hào)
  "prettier.semi": false,
  // 如果為true，將使用單引號(hào)而不是雙引號(hào)
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  // vetur插件格式化使用beautify內(nèi)置規(guī)則
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  //函數(shù)前加空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 沒(méi)有下邊這個(gè) 上邊不生效
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 細(xì)節(jié),配置gitlen中g(shù)it提交歷史記錄的信息顯示情況
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressResultsExplorerNotice": false,
    "suppressUpdateNotice": true,
    "suppressWelcomeNotice": false
  },
  // 對(duì)不屬于任何工程的 JavaScript 文件啟用或禁用 "experimentalDecorators" 設(shè)置。若有 jsconfig.json 或 tsconfig.json 文件，將覆蓋此設(shè)置。要求工作區(qū)使用高于 2.3.1 版本的 TypeScript。
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "powermode.enabled": true,
  "powermode.presets": "flames",
  // 開啟apicloud在vscode中的wifi真機(jī)同步
  "apicloud.port": "23450",
  // 設(shè)置apicloud在vscode中的wifi真機(jī)同步根目錄
  "apicloud.subdirectories": "/apiclouduser",
  "terminal.integrated.shell.windows": "C:WindowsSystem32WindowsPowerShellv1.0powershell.exe"
}

用戶代碼片段

打開文件 > 首選項(xiàng) > 用戶代碼片段 > （搜索代碼語(yǔ)言）

HTML片段

{
    "ss": {
        "prefix": "ss",
        "body": [
            ""
        ],
        "description": ""
    },
    "html5": {
        "prefix": "html5",
        "body": [
            "",
            "",
            "",
            "",
            "  ",
            "  ",
            "  ",
            "  ${1:Document}",
            "",
            "",
            "",
            "  $2",
            "",
            "",
            ""
        ],
        "description": "HTML5"
    }
}

JavaScript / JavaScript React

{
    "cl": {
        "prefix": "cl",
        "body": [
            "console.log($1)"
        ],
        "description": "console.log("")"
    },
    "dg": {
        "prefix": "dg",
        "body": [
            "document.getElementById($1)"
        ],
        "description": "document.getElementById(id)"
    },
    "jsdoc": {
        "prefix": "__",
        "body": [
            "/**",
            " * $1",
            " */"
        ],
        "description": "/** */"
    }
}

快捷鍵設(shè)置

// 將鍵綁定放入此文件中以覆蓋默認(rèn)值
[
    // ctrl+shift+d 復(fù)制當(dāng)前行到下一行
    {
        "key": "ctrl+shift+d",
        "command": "editor.action.copyLinesDownAction",
        "when": "editorTextFocus && !editorReadonly"
    },
    // ctrl+shift+f 格式化代碼
    {
        "key": "ctrl+shift+f",
        "command": "editor.action.formatDocument",
        "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
    },
    // alt+/ 代碼提示
    {
        "key": "alt+/",
        "command": "editor.action.triggerSuggest",
        "when": "editorTextFocus"
    },
    // ctrl+shift+/ 多行注釋
    {
        "key": "ctrl+shift+/",
        "command": "editor.action.blockComment",
        "when": "editorTextFocus"
    }
]

插件推薦

提示：VS Code自帶有代碼格式化功能，可以格式化HTML、CSS、JavaScript、JSON文件，格式JSX文件時(shí)需要設(shè)置縮進(jìn)方式為空格·

Auto Close Tag （自動(dòng)關(guān)閉HTML標(biāo)簽）
Auto Rename Tag (HTML標(biāo)簽自動(dòng)改名)
Babel ES6/ES7 
VS Code JavaScript (ES6) snippets (ES6語(yǔ)法提示)
Beautify css/sass/scss/less
Brackets Light (主題)
Complete JSDoc Tags (js文檔注釋提示)
Git History (查看git提交記錄)
HTML CSS Support (HTML中提示可用的class)
npm Intellisense (提示可以require的模塊名稱(最新版的vscode已經(jīng)集成此功能))
One Dark Theme (主題)
Path Intellisense (路徑補(bǔ)全)
Prettier (格式化，使用標(biāo)準(zhǔn)風(fēng)格，快捷鍵 alt+shift +F)
Reactjs code snippets (reactjs代碼提示)
Sass
SCSS IntelliSense
Sublime Babel
Sublime Text Keymap for VS Code (sublime鍵映射)
VSCode Great Icons (文件圖標(biāo))
vscode-icons （文件圖標(biāo)）
HTMLHint （html代碼檢查）
HTML Snippets (超級(jí)實(shí)用且初級(jí)的 H5代碼片段以及提示)
Document this (js 的注釋模板 (注意：新版的vscode已經(jīng)原生支持,在function上輸入/** tab))
cssrem (將css中的px自動(dòng)轉(zhuǎn)換為rem.再也不用計(jì)算器了)
Vetur (添加對(duì).vue后綴文件的快速書寫支持)
Vue 2 Snippets (快速新建vue頁(yè)面)

主題、文件圖標(biāo)推薦

主題我用的是：Atom One Dark Theme（theme-oceanicnext、Dracula）

文件圖標(biāo)我用的是：VSCode Great Icons

GPU云服務(wù)器云服務(wù)器 VS Code如何 VS Code 可以在瀏覽器運(yùn)行了？微軟 vs2010插件 vs2012配置opencv

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81856.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wpw

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

啟明云端分享：小米智能手環(huán)主控的秘密

閱讀 2327·2021-11-23 09:51
如何查詢上網(wǎng)代理主機(jī)-怎么查電腦代理服務(wù)器的主機(jī)名和端口？

閱讀 5730·2021-09-22 15:39
【帶你刷系列】?c陷阱與缺陷（一）

閱讀 3376·2021-09-02 15:15
為什么我們從Angular 2遷移到Vue.js（為什么我們沒(méi)有選擇React）

閱讀 3525·2019-08-30 15:54
Codepen 每日精選（2018-4-12）

閱讀 2384·2019-08-30 15:53
Jquery就是這么簡(jiǎn)單

閱讀 1425·2019-08-30 14:04
BFC與IFC

閱讀 2476·2019-08-29 18:33
如何寫一份好的前端面試簡(jiǎn)歷?

閱讀 2409·2019-08-29 13:08

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

VS Code配置及插件推薦

相關(guān)文章

前端（HTML css JS）開發(fā)工具及常用插件推薦

**VS Code上手與超實(shí)用插件安利**

**高效開發(fā)者是如何個(gè)性化VS Code插件與配置的？**

**前端開發(fā) VS Code 上手使用**

**VS code-前端配置_022**

發(fā)表評(píng)論

0條評(píng)論

wpw

男|高級(jí)講師

TA的文章

啟明云端分享：小米智能手環(huán)主控的秘密

如何查詢上網(wǎng)代理主機(jī)-怎么查電腦代理服務(wù)器的主機(jī)名和端口？

【帶你刷系列】?c陷阱與缺陷（一）

為什么我們從Angular 2遷移到Vue.js（為什么我們沒(méi)有選擇React）

Codepen 每日精選（2018-4-12）

Jquery就是這么簡(jiǎn)單

BFC與IFC

如何寫一份好的前端面試簡(jiǎn)歷?

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

VS Code配置及插件推薦

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！