常用vscode配置和插件

VSCode（全称：Visual Studio Code）是微软2015年推出的一个轻量但功能强大的源代码编辑器，基于 Electron 开发，支持 Windows、Linux 和 macOS 操作系统。它内置了对 JavaScript，TypeScript 和 Node.js 的支持并且具有丰富的其它语言和扩展的支持，功能超级强大。VSCode 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT 命令等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。

官网地址：https://code.visualstudio.com
官方文档地址：https://code.visualstudio.com/docs

常用vscode配置

设置方法： vscode => Code => 首选项 => 设置

在这里插入图片描述

点击如下图按钮，打开`settings.json`，进行json配置

在这里插入图片描述

settings.json：

{
  "typescript.locale": "zh-CN",
  "editor.quickSuggestions": {
    // 控制键入时是否应自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "window.zoomLevel": 0, // 调整窗口的缩放级别。原始大小是 0
  "editor.fontSize": 14, // 显示的字体大小
  "editor.tabSize": 2, // tab锁紧二个空格
  "editor.insertSpaces": true, // 按Tab时是插入空格
  "files.autoSave": "onFocusChange", // 控制已更新文件的自动保存,"onFocusChange" (编辑器失去焦点)
  "editor.wordWrap": "on", // 是否一行太长自动换行
  "emmet.triggerExpansionOnTab": true, // 是否启用Emmet展开缩写
  "editor.renderWhitespace": "all", // 空格变成...
  "eslint.validate": [
    // eslint配置
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue"
  ],
  "editor.formatOnSave": true, // 每次保存的时候自动格式化
  "prettier.singleQuote": true, // 使用单引号
  "workbench.iconTheme": "material-icon-theme",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "tslint.alwaysShowRuleFailuresAsWarnings": true,
  "editor.formatOnPaste": true,
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  "alias-skip.mappings": {
    "@": "/src"
  },
  "stylusSupremacy.insertColons": true, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": true, // 是否插入分好
  "stylusSupremacy.insertBraces": true, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": true, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": true, // 两个选择器中是否换行
  "eslint.nodeEnv": "development",
  "eslint.codeAction.showDocumentation": {
    "enable": false
  },
  "bracketPairColorizer.depreciation-notice": false
}