这样配置，让你的VS Code好用到飞起！Visual Studio Code (简称 VS Code / VSC) 是

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性。提高软件开发的效率，让你有更多的时间去撸代码。

基础知识：

*主题设置：1) 快捷键：ctrl+shift+p 2) 选择：color theme

*快捷键设置

整行的复制粘贴：ctrl+c ctrl+v
ctrl+/ 行注释
shift+alt+A 块注释
ctrl+shift+enter 上方插入一行
ctrl+shift+f 文件夹查找
ctrl+enter 下方插入一行
alt+shift+f 格式化代码

本文主要包括：

1、VSCode 常用配置

2、基础必备

3、代码规范

4、代码管理

5、VSCode 项目实践配置

一、VSCode 常用配置（重要）

1、HTML

Auto Rename Tag - 修改HTML标签时自动修改匹配标签
HTML Snippets - html标签的代码提示
Path Intellisense - 文件路径提示
HTML CSS Support html提示css自动补全
Bracket Pair Colorizer - 颜色标识匹配 (快速区分括号位置和类型)

2、Css

beautify css/sass/scss/less css/sass/scss/less格式化
css peek html与css关联

3、语法检查

ESLint - 规范js代码书写规则

说明：ESLint 找到的大部分问题都可以由其自动修复。ESLint 会根据当前文件使用的语法进行自动修复。

TSLint - ts的书写规范
Prettier - Code formatter 格式化插件

说明：Prettier 是相当有用的插件，可以一键美化你的 JavaScript/TypeScript/CSS 代码。

4、注释

koroFileHeader - 头部注释和函数注释的插件

5、Vue

vetur vue语法高亮 (Vue开发者必备)

说明：支持多种功能，比如语法高亮、错误检测、格式化、自动补全、debugger等实用功能。

vueHelper vue2代码段

6、Git 代码管理

Git History工具 - 查看git提交的历史记录

说明：查看文件的历史记录（Git日志）或文件中的行历史（Git Blame）

Git supercharged - 提交信息

说明：每一行 code 的作者、提交时间、commit log 等信息，一目了然。

二、基础必备

1、Chinese - 编辑器汉化包

vscode编辑器汉化包，安装后重启会自动变成中文（简体）语言，卸载后重启会自动变成英文语言。

知识扩展：

安装后，在 locale.json 中添加 "locale": "zh-cn"，即可载入中文（简体）语言包。

按 ctrl+shift+p 快捷键

1）中文设置成英文输入 “配置语言” 打开locale.json 设置 "locale":"en"；

2）英文设置成中文输入 "Configure Language" 打开locale.json "locale":"zh-CN"；

2、Auto Rename Tag - 自动重命名成对的HTML标记

自动重命名配对的HTML / XML标签(必备)。

例如：

3、HTML Snippets - html标签的代码提示

HTML代码片段，该插件提供html标签的代码提示，不用键入尖括号了。

例如：span 变成

4、Bracket Pair Colorizer - 颜色标识匹配

这个扩展允许用颜色来标识匹配的括号。用户可以定义要匹配的字符和要使用的颜色。

例如：

成对的括号（大括号，小括号）颜色相同，这在代码多层括号嵌套时显得尤为重要。

5、Path Intellisense - 文件路径提示

自动提示文件路径，支持各种快速引入文件。

6、Vetur - Vue开发者必备

VScode官方钦定Vue插件，Vue开发者必备。内含语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger等实用功能。

7、分屏功能 - 项目实践

我在写代码的时候经常碰到的一个场景就是不同的文件之间进行操作，俩个文件来回切换特别麻烦。

其实你熟练掌握了 vscode 的分屏操作这里能够让你爽到飞起。

三、代码规范

1、ESLint - 规范js代码书写规则

代码格式校验，支持自定义配置，错误是红色的波浪线，警告是绿色的

例如：

如果不符合之前配置eslint规则的，就会出现红色波浪线，鼠标移上去会显示具体的错误。

2、TSLint - ts的书写规范

ts的书写规范，这个插件是一个系列，同时还提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX

3、koroFileHeader - 头部注释和函数注释的插件

用于添加文件头部注释，函数注释。

注释代码显示结果：

<!--
 * @Author: zhangsan
 * @Date: 2019-11-11 19:27:19
 * @LastEditors: zhangsan
 * @LastEditTime: 2021-02-05 13:13:57
 * @Describe: 达人发现
-->

详细代码配置，例如：

1､设置自动生成注释

"fileheader.configObj": {
    "autoAdd": true  //自动生成注释，老是忘记的同学可以设置
 },

2､文件头部注释

"fileheader.customMade": {
    "Description":"" ,//文件内容描述
    "Author":"huacong",//编辑人
    "Date": "Do not edit",//时间
    "LastEditTime": "Do not edit",
    "LastEditors": "huacong",
 },

文件头部添加注释，快捷键：window：ctrl+alt+i, mac：ctrl+cmd+i

3､函数注释

"fileheader.cursorMode": {
    "description":"",
    "param ":"",
    "return":""
  },

在光标处添加函数注释，快捷键：window：ctrl+alt+t,mac：ctrl+cmd+t

说明：快捷键如果没有生效，注意简介快捷键是否被占用。

四、代码管理

1、Git History工具 - 查看git提交的历史记录

例如：

查看修改记录，或者需要查看谁提交了什么文件。

2、Git supercharged - 提交信息

每一行 code 的作者、提交时间、commit log 等信息，一目了然。

例如：

如果开发是vscode+git,这个插件强烈推荐，一眼就能看到是谁改了你的代码。

五、VSCode 项目实践配置

VSCode的setting.json配置。

{
  "workbench.editor.enablePreview": false, //打开文件不覆盖
  "search.followSymlinks": false, //关闭rg.exe进程
  "editor.minimap.enabled": false, //关闭快速预览
  "liveServer.settings.donotShowInfoMsg": true, //关闭liveserver提示
  // "files.autoSave": "afterDelay", //打开自动保存
  "editor.fontSize": 16, //设置文字大小
  "editor.lineHeight": 24, //设置文字行高
  "editor.lineNumbers": "on", //开启行数提示
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "window.zoomLevel": 0, // 调整窗口的缩放级别
  "editor.tabSize": 2, //制表符符号eslint
  // "editor.formatOnSave": true, //每次保存自动格式化
  // #让prettier使用eslint的代码格式进行校验
  "fileheader.configObj": {
    "autoAdd": true // 默认开启
  },
  // #使用带引号替代双引号
  "prettier.singleQuote": false,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "eslintIntegration": true,
      "semi": false
    }
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  // "vetur.format.defaultFormatter.html": "js-beautify-html",
  "eslint.validate": [
    //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
  // "workbench.iconTheme": "vscode-icons",
  "explorer.confirmDelete": false,
  // 文件头部注释
  "fileheader.customMade": {
    "Author": "jiashuangxi",
    "Date": "Do not edit",
    "LastEditors": "jiashuangxi",
    "LastEditTime": "Do not Edit",
    "Describe": ""
  },
  //函数注释
  "fileheader.cursorMode": {
    "Description": "",
    "param": ""
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "editor.wordWrap": "on",
  // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

*settings.json 重要

vscode编辑器的setting.json中设置eslint的校验规则

1､第一种报错：

Auto Fix is enabled by default. Use the single string form.

原来代码配置（报错）

"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "vue",
    "autoFix": true
  }
]

现代代码配置

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "html",
  "vue"
]

2､第二种报错：

The setting is deprecated. Use editor.codeActionsOnSave instead with a source.fixAll.eslint member.

意思是：此配置已作废，使用editor.codeActionsOnSave，里面配置source.fixAll.eslint 属性。

把"eslint.autoFixOnSave": true 改成：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },