VSCode 开发配置，一文搞定（持续更新中...）_vscode 前端开发配置

一、快速生成页面骨架

文件 > 首选项 > 配置用户代码片段

选择需要的代码片段或者创建一个新的，这里以 vue.json 举例：

下面为我配置的代码片段，仅供参考：

1. Vue2 + JS

在 .vue 文件中输入 vue2 回车。即可快速生成页面骨架

{
  "Print to console": {
    "prefix": "vue2",
    "body": [
      "<template>",
      "  <div class='$1'></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data() {",
      "    return {}",
      "  },",
      "  computed: {},",
      "  methods: {}",
      "}",
      "</script>",
      "",
      "<style lang='scss' scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Log output to console"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2. Vue3 + TS

在 .vue 文件中输入 vue3 回车。即可快速生成页面骨架

{
  "Print to console": {
    "prefix": "vue3",
    "body": [
      "<script setup lang='ts'>",
      "</script>",
      "",
      "<template>",
      "  <div class='$1'></div>",
      "</template>",
      "",
      "<style lang='scss' scoped>",
      "",
      "</style>",
      ""
    ],
    "description": "Log output to console"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

二、格式化配置

这一块有很多配置，就不一一介绍了，直接放上配置项并加上注释，自己选择需要的去配置，以下是我个人的配置习惯

1. Vue2 + JS 配置

settings.json

{
  // 编辑器配置
  "workbench.colorTheme": "Atom One Dark",
  "workbench.iconTheme": "vscode-icons",
  "editor.fontSize": 15,
  "editor.links": false,
  "editor.detectIndentation": true,
  "editor.formatOnSave": true,
  "editor.inlayHints.enabled": "off", // 禁用编辑器内嵌提示
  "editor.tabSize": 2,
  "editor.insertSpaces": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // eslint 配置
  "eslint.validate": ["javascript", "javascriptreact", "vue"],

  // vue 格式化程序
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur" // 使用 vetur 替换默认格式化
  },

  // 配置 vetur 格式化规则
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.options.tabSize": 2,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto" // html 标签自动换行（这样设置不会频繁换行）
    },
    "prettier": {
      "semi": false, // 末尾不添加分号
      "singleQuote": true, // 使用单引号
      "trailingComma": "none" // 末尾不添加引号
    }
  },

  // js 格式化程序
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "js/ts.implicitProjectConfig.experimentalDecorators": true,  // json 格式化程序：默认使用 vscode 格式
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // ts 格式化程序：默认使用 vscode 格式
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // scss 格式化程序：默认使用 vscode 格式
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // less 格式化程序：默认使用 vscode 格式
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

2. Vue3 + TS 配置

如果同时下载了 vetur 和 volar 插件，需要禁用 vetur 插件

{
  // 编辑器配置
  "workbench.colorTheme": "Atom One Dark",
  "workbench.iconTheme": "vscode-icons",
  "editor.fontSize": 15,
  "editor.links": false,
  "editor.detectIndentation": true,
  "editor.formatOnSave": false, // 是否在保存时自动格式化
  "editor.inlayHints.enabled": "off", // 禁用编辑器内嵌提示
  "editor.tabSize": 2,
  "editor.insertSpaces": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // html 格式化配置
  "html.format.wrapLineLength": 150, // 每行最大字符数

  // eslint 配置
  "eslint.validate": ["javascript", "javascriptreact", "vue"],

  // vue 格式化程序
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar" // 使用 volar 替换默认格式化
  },

  // 配置 volar 格式化规则
  "volar.autoCompleteRefs": true,

  // js 格式化程序
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "js/ts.implicitProjectConfig.experimentalDecorators": true,

  // json 格式化程序：默认使用 vscode 格式
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // ts 格式化程序：默认使用 vscode 格式
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // scss 格式化程序：默认使用 vscode 格式
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // less 格式化程序：默认使用 vscode 格式
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

vue3项目不用配置那么多内容，.prettierrc.json 文件已经包含了这些格式化配置

.prettierrc.json

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 120,
  "trailingComma": "none"
}
1
2
3
4
5
6
7
8

三、界面美化配置

1. 取消默认链接显示下划线

这种密密麻麻的下划线，看着是不是很难受？取消这个配置，即可隐藏它。

文件 > 首选项 > 设置 ，中找到 Links 配置，取消它即可。

2. 取消标签频繁换行

Vue2 + Vetur

明明很短的标签，一行就可以显示，但是格式化后却频频换行，看着是不是别扭，别着急，按照下面的配置，轻松搞定它。

1. 安装 Vetur 插件，注意版本号，有些最新的版本可能会出现莫名其妙的bug，如果遇到了，卸载后安装低版本即可，（我安装的是 v0.36.1 版本，未遇到 bug）
2. 打开设置的 json 文件，在里面进行编辑，打开方法和配置如下
   
   

  "[vue]": {
    "editor.defaultFormatter": "octref.vetur" // 使用vetur取代vscode默认配置
  },
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "auto"
    },
  },
1
2
3
4
5
6
7
8

Vue3 + Volar

在 文件 > 首选项 > 设置 中将 HTML › Format: Wrap Line Length 改为 150 即可，更大也行。

或者直接在 stting.json 中添加一行代码也可。

"html.format.wrapLineLength": 150, // 每行最大字符数
1

四、插件推荐

1. 主题

• GitHub Theme
  共9种颜色主题，数量虽然不多，但都是精品。
• Atom One Dark Theme
  个人最喜欢的主题，颜色没有很高的明度，久看眼睛不累，色彩搭配合理，清晰明了

2. git相关

• Git History
  查看和搜索 git 日志以及图表和详细信息。

• GitLens — Git supercharged
  光标所在的那一行，提示代码更新记录，是谁修改的，多久之前修改的。
  

3.格式化

• Prettier ESLint
  一个 Visual Studio Code 扩展，用于使用prettier-eslint包格式化 JavaScript 和 TypeScript 代码。

4.汉化

• Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
  汉化，将VS Code汉化。

5.在浏览器中打开 html 文件

• open in browser
  右击html文件，选择open in Default Browser即可在默认浏览器中打开。

6.图标美化

• vscode-icons
• Material Icon Theme
  这两种风格差不多，都是精品，Material Icon Theme 图标稍大一点，个人更喜欢 Material Icon Theme 。

7.效率相关

• Auto Rename Tag
  自动重命名配对的 HTML/XML 标记，与 Visual Studio IDE 的操作相同。

五、其他设置

1. 取消自动保存

在 文件 > 首选项 > 设置 中找到自动保存这一项，也可以搜索，将其设置为 off 即可。

WAIT…