VS Code设置及插件引荐

用户设置

翻开 文件 > 首选项 > 用户设置(U),(疏忽掩盖事情区提醒)

{
  // 一个制表符即是的空格数。该设置在 `editor.detectIndentation` 启用时依据文件内容举行重写。
  "editor.tabSize": 2,
  "editor.lineHeight": 24,
  "editor.renderLineHighlight": "none",
  "editor.renderWhitespace": "none",
  // 掌握字体系列。
  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace,'宋体'",
  "editor.fontLigatures": true,
  // 以像素为单元掌握字号。
  "editor.fontSize": 14,
  "editor.cursorBlinking": "smooth",
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  // 掌握拔取局限是不是有圆角
  "editor.roundedSelection": false,
  // 发起小组件的字号
  "editor.suggestFontSize": 16,
  // 是不是许可自定义的snippet片断提醒,比方自定义的vue片断开启后就能够智能提醒
  "editor.snippetSuggestions": "top",
  "editor.quickSuggestions": {
    "strings": true
  },
  // 实行笔墨相干的导航或操纵时将用作笔墨分隔符的字符
  "editor.wordSeparators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
  // 在“翻开的编辑器”窗格中显现的编辑器数目。将其设置为 0 可隐蔽窗格。
  "explorer.openEditors.visible": 0,
  "git.path": "D:/Program Files/Git/bin/git.exe",
  // 是不是已启用自动革新
  "git.autorefresh": true,
  // git是不是启用自动拉取
  "git.autofetch": false,
  // 以像素为单元掌握终端的字号,这是 editor.fontSize 的默许值。
  "terminal.integrated.fontSize": 14,
  // 掌握终端游标是不是闪灼。
  "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 文件搜刮地区设置
  "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
  },
  // 消除文件搜刮地区,比方node_modules(知心的默许设置已屏障了)
  "files.exclude": {
    "**/.idea": true,
    "**/yarn.lock": true,
    "**/tmp": true
  },
  // 设置文件关联,以便启用对应的智能提醒,比方wxss运用css
  "files.associations": {
    "*.vue": "vue",
    "*.wxss": "css"
  },
  // 设置emmet是不是启用tab睁开缩写
  "emmet.triggerExpansionOnTab": true,
  // 设置emmet对文件范例的支撑,比方vue后缀文件根据html文件来举行emmet扩写
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    // xml范例文件默许都是单引号,开启对非单引号的emmet辨认
    "xml": {
      "attr_quotes": "single"
    }
  },
  // 在react的jsx中添加对emmet的支撑
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact"
  },
  // 是不是开启eslint检测
  "eslint.enable": true,
  // 文件保留时,是不是自动依据eslint举行花样化
  "eslint.autoFixOnSave": true,
  // eslint设置文件
  "eslint.options": {
    "plugins": [
      "html",
      "javascript",
      {
        "language": "vue",
        "autoFix": true
      },
      "vue"
    ]
  },
  // eslint能够辨认的文件后缀范例
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
      "language": "html",
      "autoFix": true
    },
    "typescript",
    "typescriptreact"
  ],
  // 快捷键计划,运用sublime的一套快捷键
  "sublimeTextKeymap.promptV3Features": true,
  // 花样化快捷键 shirt+alt+F
  // prettier举行花样化时是不是装置eslint设置去实行,发起false
  "prettier.eslintIntegration": true,
  //分号
  "prettier.semi": false,
  // 假如为true,将运用单引号而不是双引号
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  // vetur插件花样化运用beautify内置划定规矩
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  //函数前加空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 没有下边这个 上边不见效
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  // 细节,设置gitlen中git提交历史纪录的信息显现状况
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": false,
    "suppressCommitNotFoundWarning": false,
    "suppressFileNotUnderSourceControlWarning": false,
    "suppressGitVersionWarning": false,
    "suppressLineUncommittedWarning": false,
    "suppressNoRepositoryWarning": false,
    "suppressResultsExplorerNotice": false,
    "suppressUpdateNotice": true,
    "suppressWelcomeNotice": false
  },
  // 对不属于任何工程的 JavaScript 文件启用或禁用 "experimentalDecorators" 设置。如有 jsconfig.json 或 tsconfig.json 文件,将掩盖此设置。请求事情区运用高于 2.3.1 版本的 TypeScript。
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "powermode.enabled": true,
  "powermode.presets": "flames",
  // 开启apicloud在vscode中的wifi真机同步
  "apicloud.port": "23450",
  // 设置apicloud在vscode中的wifi真机同步根目录
  "apicloud.subdirectories": "/apiclouduser",
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
}

用户代码片断

翻开 文件 > 首选项 > 用户代码片断 > (搜刮代码言语)

HTML片断

{
    "ss": {
        "prefix": "ss",
        "body": [
            "<script src=\"$1\"></script>"
        ],
        "description": "<script src=\"...\"></script>"
    },
    "html5": {
        "prefix": "html5",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"zh-CN\">",
            "",
            "<head>",
            "  <meta charset=\"UTF-8\">",
            "  <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">",
            "  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "  <title>${1:Document}</title>",
            "</head>",
            "",
            "<body>",
            "  $2",
            "</body>",
            "",
            "</html>"
        ],
        "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": "/** */"
    }
}

快捷键设置

// 将键绑定放入此文件中以掩盖默许值
[
    // ctrl+shift+d 复制当前行到下一行
    {
        "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文件时须要设置缩进体式格局为空格·

Auto Close Tag (自动封闭HTML标签)
Auto Rename Tag (HTML标签自动更名)
Babel ES6/ES7 
VS Code JavaScript (ES6) snippets (ES6语法提醒)
Beautify css/sass/scss/less
Brackets Light (主题)
Complete JSDoc Tags (js文档解释提醒)
Git History (检察git提交纪录)
HTML CSS Support (HTML中提醒可用的class)
npm Intellisense (提醒能够require的模块称号(最新版的vscode已集成此功用))
One Dark Theme (主题)
Path Intellisense (途径补全)
Prettier (花样化,运用规范作风,快捷键 alt+shift +F)
Reactjs code snippets (reactjs代码提醒)
Sass
SCSS IntelliSense
Sublime Babel
Sublime Text Keymap for VS Code (sublime键映照)
VSCode Great Icons (文件图标)
vscode-icons (文件图标)
HTMLHint (html代码搜检)
HTML Snippets (超等有用且低级的 H5代码片断以及提醒)
Document this (js 的解释模板 (注重:新版的vscode已原生支撑,在function上输入/** tab))
cssrem (将css中的px自动转换为rem.再也不必计算器了)
Vetur (添加对.vue后缀文件的疾速誊写支撑)
Vue 2 Snippets (疾速新建vue页面)

主题、文件图标引荐

  • 主题我用的是:Atom One Dark Theme(theme-oceanicnext、Dracula)
  • 文件图标我用的是:VSCode Great Icons
    原文作者:无名小子
    原文地址: https://segmentfault.com/a/1190000008538161
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞