安装

安装：前往 VS Code 官方网站（https://code.visualstudio.com/ ），根据你的操作系统（Windows、Mac 或 Linux）下载对应的安装包。下载完成后，运行安装程序，按照提示完成安装。

VS Code 的设置页面

通过菜单操作

  1. 点击菜单栏中的 “文件” 选项。
  2. 在弹出的下拉菜单中，选择 “首选项”。
  3. 然后点击 “设置”，即可打开设置页面。

使用快捷键

  1. 在 Windows 和 Linux 系统上，可以使用 Ctrl +,（逗号）快捷键直接打开设置页面。
  2. 在 Mac 系统上，使用 Command +,（逗号）快捷键来打开设置页面。

VS Code 配置文件

以下是对给定的 VS Code 配置文件的分析、分类和问题修正：

一、界面主题和图标主题相关

1
2
3
4
{
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "vscode-icons"
}

说明：

  • workbench.colorTheme 用于设置 VS Code 的颜色主题，这里选择的是 “Default Light Modern” 主题，提供了一种明亮的现代风格的界面颜色。
  • workbench.iconTheme 用于设置文件和文件夹等元素的图标主题，这里使用的是 “vscode-icons”，为 VS Code 的资源管理器等区域带来了丰富的图标。

二、远程开发相关

1
2
3
4
5
{
  "remote.SSH.remotePlatform": {
    "192.168.1.102(root)": "linux"
  }
}

说明：

  • 该配置用于远程开发，特别是通过 SSH 连接时。它指定了远程服务器 192.168.1.102(root) 的平台是 linux，这样 VS Code 可以根据平台信息进行相应的远程操作和适配。

三、资源管理器相关

1
2
3
4
{
  "explorer.sortOrder": "modified",
  "explorer.confirmDelete": false
}

说明：

  • explorer.sortOrder 决定了资源管理器中文件和文件夹的排序方式，这里设置为 modified，表示按照修改时间排序。
  • explorer.confirmDelete 原本设置为 false，表示在删除文件时不弹出确认对话框。但是在配置文件中存在重复设置，且后面的注释说明应该是最终保留该设置为 false，所以可以保留该配置。

四、Git 相关

1
2
3
4
5
6
7
{
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "workbench.editorAssociations": {
    "{git,gitlens,git-graph}:/**/*.{md,csv,svg}": "default"
  }
}

说明：

  • git.autofetch 表示开启自动拉取 Git 仓库更新的功能。
  • git.enableSmartCommit 启用智能提交功能，使提交操作更加便捷。
  • workbench.editorAssociations 则是将与 Git 相关的文件（如 git、gitlens、git-graph 插件生成的文件，且文件后缀为 md、csv、svg）关联到默认编辑器。

五、不同语言的格式化相关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "[markdown]": {
    "editor.defaultFormatter": "harttle.md-padding-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  }
}

说明：

  • 对于不同的编程语言，设置了相应的默认格式化工具。例如，在编辑 markdown 文件时，使用 harttle.md-padding-vscode 进行格式化；在编辑 vue 或 typescript 文件时，使用 esbenp.prettier-vscode 进行格式化。

六、编辑器通用设置相关

1
2
3
4
5
6
7
8
{
  "editor.fontFamily": "'MesloLGS NF',Consolas, 'Courier New', monospace",
  "editor.mouseWheelZoom": true,
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.autoClosingBrackets": "always"
}

说明：

  • editor.fontFamily 设定了编辑器使用的字体。
  • editor.mouseWheelZoom 允许使用鼠标滚轮进行缩放操作。
  • editor.insertSpaces 表示使用空格代替制表符，且 editor.tabSize 为 2，表示一个制表符等于 2 个空格。
  • editor.wordWrap 为 on 表示自动换行。
  • editor.autoClosingBrackets 总是自动闭合括号，提高代码输入效率。

七、保存时的代码操作相关

1
2
3
4
5
6
7
8
{
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll": "always"
  }
}

问题及修正：

  • 这里存在冲突，editor.formatOnSave 既被设置为 true 又被设置为 false，根据后面的注释，最终应该将 editor.formatOnSave 设置为 false。
  • editor.codeActionsOnSave 中同时设置了 source.fixAll.eslint 和 source.fixAll，可能会引起混淆，根据注释，应该保留 source.fixAll 为 always，删除 source.fixAll.eslint 。

修改后的配置：

1
2
3
4
5
6
7
{
  "editor.formatOnSave": false,
  "files.autoSave": "afterDelay",
  "editor.codeActionsOnSave": {
    "source.fixAll": "always"
  }
}

八、JavaScript 相关特殊设置

1
2
3
4
5
6
7
{
  "javascript.validate.enable": false,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "emmet.triggerExpansionOnTab": true
}

说明：

  • javascript.validate.enable 关闭了 JavaScript 的代码校验功能。
  • emmet.includeLanguages 将 JavaScript 关联到 javascriptreact 以支持 Emmet 功能。
  • emmet.triggerExpansionOnTab 表示按下 Tab 键触发 Emmet 扩展，方便代码补全和快速输入。

九、Less 编译相关

1
2
3
4
5
{
  "less.compile": {
    "out": "${workspaceRoot}\\css\\"
  }
}

说明：

  • 该配置用于配置 Less 编译的输出目录，这里将编译输出目录设置为 ${workspaceRoot}\\css\\，表示将 Less 文件编译后输出到工作区根目录下的 css 文件夹。

插件

编码风格统一：EditorConfig

EditorConfig for VS Code - Visual Studio Marketplace

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// .editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 80
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

代码自动格式化:prettier

  1. 开启 Prettier :Prettier - Code formatter - Visual Studio Marketplace

  2. 设置默认格式化 Editor

  3. 开启保存时格式话

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
      "editor.formatOnSave": true,//在保存文件时自动调用 Prettier 对代码进行格式化。
      "editor.defaultFormatter": "esbenp.prettier-vscode", //指定使用 Prettier 作为默认的代码格式化工具。
       // 常见的 Prettier 配置项
      "prettier.semi": false, // 在语句末尾添加分号。
      "prettier.singleQuote": true, // 是否使用单引号
      "prettier.trailingComma": "es", //在多行对象、数组等的末尾添加尾随逗号
      "prettier.arrowParens": "always",//在箭头函数的参数周围总是添加括号，即使只有一个参数。
      "prettier.printWidth": 80, //指定代码行的最大长度，超过该长度会尝试换行。
      "prettier.tabWidth": 2 // 指定一个制表符等于 2 个空格。
    }

  4. 你有更复杂的需求，可以在项目根目录下创建一个 .prettierrc 文件，以 JSON 或 YAML 格式来存储更详细的 Prettier 配置信息。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    {
      // 是否在语句末尾添加分号
      "semi": false,
      // 是否使用单引号
      "singleQuote": true,
      // 在对象、数组等的最后元素后面添加尾随逗号，可选值有 "es"、"none"、"all"
      "trailingComma": "all",
      // 代码行的最大长度，超过该长度会尝试换行
      "printWidth": 100,
      // 一个制表符等于几个空格
      "tabWidth": 2,
      // 是否使用制表符，这里设置为使用空格
      "useTabs": false,
      // 在对象的括号之间是否添加空格
      "bracketSpacing": true,
      // 在 JSX 中是否使用单引号，这里设置为使用双引号
      "jsxSingleQuote": false,
      // 使用的解析器，这里是 babylon
      // "parser": "babylon",
      "arrowParens": "always"
    }

  5. .prettierrcignore 文件的作用类似于 .gitignore，它用于告诉 Prettier 哪些文件或目录不需要进行格式化操作。

    1
    2
    3
    4
    5
    6
    7
    node_modules/
    dist/
    build/
    *.min.js
    .husky
    *.svg
    *.sh

JS/TS修复建议:ESLint

ESLint - Visual Studio Marketplace

ESLint 是一个查找 JavaScript / TypeScript 代码问题并提供修复建议的工具，换句话说就是可以约束的代码不会写出一堆 BUG ，它是代码健壮性的重要保障。

如果有一些文件需要排除检查，可以再创建一个 .eslintignore 文件在项目根目录下，里面添加要排除的文件或者文件夹名称：

1
dist/*

项目根目录下创建一个名为 .eslintrc.js 文件，写入以下内容：

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
module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
  },
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'prettier'],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': 'warn',
    'vue/multi-word-component-names': 'off',
  },
  globals: {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly',
  },
}

然后安装对应的依赖（记得添加 -D 参数添加到 devDependencies ，因为都是开发环境下使用的）：

1
2
3
4
# 使用 npm：
npm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier -D
# 使用 yarn：
yarn add eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier --dev
  • -D 或 --dev：表示将这些依赖添加到 devDependencies 中，因为这些依赖主要用于开发环境，如代码检查、格式化等，而不是运行时所需的依赖。
  • eslint：是 ESLint 的核心包，用于代码检查。
  • eslint-config-prettier：用于关闭 ESLint 中与 Prettier 冲突的规则，使 ESLint 和 Prettier 可以更好地协作。
  • eslint-plugin-prettier：将 Prettier 作为 ESLint 的规则，让 ESLint 可以使用 Prettier 的格式化规则进行检查。
  • eslint-plugin-vue：为 Vue 项目提供 ESLint 插件，帮助检查 Vue 组件和模板中的代码。
  • @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser：如果你的项目使用 TypeScript，这些插件可以帮助 ESLint 更好地检查 TypeScript 代码。
  • prettier：用于代码格式化，确保代码风格的一致性。

Chinese (Simplified)

VSCode 安装后默认是英文本，需要自己进行汉化配置， VSCode 的特色就是插件化处理各种功能，语言方面也一样。

安装该插件并启用，即可让 VSCode 显示为简体中文。

点击下载：Chinese (Simplified)

Vue - Official(Volar )

Volar 取代了 Vetur 作为 Vue 3 的官方扩展，如果之前已经安装了 Vetur ，请确保在 Vue 3 的项目中禁用它。

Vue 官方推荐的 VSCode 扩展，用以代替 Vue 2 时代的 Vetur ，提供了 Vue 3 的语言支持、 TypeScript 支持、基于 vue-tsc 的类型检查等功能。

点击下载：Vue - Official - Visual Studio Marketplace

Vue VSCode Snippets

从实际使用 Vue 的角度提供 Vue 代码片段的生成，可以通过简单的命令，在 .vue 文件里实现大篇幅的代码片段生成，例如：

  1. 输入 ts 可以快速创建一个包含了 template + script + style 的 Vue 组件模板（可选 2.x 、3.x 以及 class 风格的模板）
  2. 也可以通过输入带有 v3 开头的指令来快速生成 Vue 3 的 API 。

下面是输入了 ts 两个字母之后，用箭头选择 vbase-3-ts 自动生成的一个模板片段，在开发过程中非常省事：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return {}
  },
})
</script>

<style scoped></style>

点击下载：Vue VSCode Snippets

Auto Close Tag

可以快速完成 HTML 标签的闭合，除非通过 .jsx / .tsx 文件编写 Vue 组件，否则在 .vue 文件里写 template 的时候肯定用得上。

点击下载：Auto Close Tag

Auto Rename Tag

假如要把 div 修改为 section，不需要再把 <div> 然后找到代码尾部的 </div> 才能修改，只需要选中前面或后面的半个标签直接修改，插件会自动把闭合部分也同步修改，对于篇幅比较长的代码调整非常有帮助。

点击下载：Auto Rename Tag

最终配置文件

以下是整理后的最终配置文件，删除了冲突和冗余的配置：

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
{
  "workbench.colorTheme": "Default Light Modern",
  "workbench.iconTheme": "vscode-icons",
  "remote.SSH.remotePlatform": {
    "192.168.1.102(sun)": "linux"
  },
  "explorer.sortOrder": "modified",
  "explorer.confirmDelete": false,
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "workbench.editorAssociations": {
    "{git,gitlens,git-graph}:/**/*.{md,csv,svg}": "default"
  },
  "[markdown]": {
    "editor.defaultFormatter": "harttle.md-padding-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "editor.fontFamily": "'MesloLGS NF',Consolas, 'Courier New', monospace",
  "terminal.integrated.fontSize": 12,
  "editor.mouseWheelZoom": true,
  "editor.insertSpaces": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.autoClosingBrackets": "always",
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode", //指定使用 Prettier 作为默认的代码格式化工具。
  "files.autoSave": "afterDelay",
  "editor.codeActionsOnSave": {
    "source.fixAll": "always"
  },
  "javascript.validate.enable": false,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "emmet.triggerExpansionOnTab": true,
  "less.compile": {
    "out": "${workspaceRoot}\\css\\"
  }
}