VSCode

前往 VSCode 官网open in new window 下载安装。你可以参考博文 VSCode 安装教程详细简单版open in new window 进行安装。

插件安装

Auto Close Tag：输入开始标签后，自动添加结束标签

Auto Rename Tag：修改标签时，自动完成开始标签和结束标签的同步修改

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code：中文语言包

CSS Peek：按住 Ctrl 点击样式类名直接跳转到样式定义

Code Spell Checker：英文单词拼写检查

Color Highlight非必须：在编辑器中输入颜色值，自动高亮显示对应颜色

EditorConfig for VS Code：根据 .editorconfig 文件中定义的代码风格和配置处理代码样式

ES7+ React/Redux/React-Native snippets：快捷键生成 React/Redux/React-Native 代码片段

ESLint：代码规范检查工具

GitLens — Git supercharged：增强内置 Git 功能，提供直观的可视化界面和一系列实用工具

markdownlint：Markdown 文件样式检查和格式化工具

Path Intellisense：输入文件路径时，给予文件路径提示

Prettier - Code formatter：代码格式化工具

SVN：版本控制工具

Vetur为避免冲突，使用时禁用 Vue - Official：Vue2 语法支持和代码高亮显示

Vue - Official为避免冲突，使用时禁用 Vetur：Vue3 语法支持和代码高亮显示

TypeScript Vue Plugin (Volar)：Vue 的 TypeScript 支持

插件配置

未提及的插件说明不需要配置，启用即生效。

ESLint 配置：VSCode 左下角「管理」图标 -> 设置 -> 搜索 “格式化” -> Default Formatter 这一项选择 ESLint -> Format On Save 这一项勾选

代码片段

VSCode 左下角「管理」图标 -> 用户代码片段 -> 新建全局代码片段文件 -> 输入框提示「键入代码段文件名」，输入 global，回车确定，将会生成并打开一个代码片段文件 -> 使用下面代码片段覆盖文件中的所有内容，再保存即可：

点击查看代码片段

{
 // 代码片段名称
 "Arrow function": {
  // 指定该代码片段在哪些语言名称列表中生效
  "scope": "javascript,typescript,javascriptreact,typescriptreact,vue",
  // 快捷键
  "prefix": "af",
  // 生成内容
  "body": [
   "($1) => {",
   "  $2",
   "}"
  ],
  // 描述
  "description": "箭头函数"
 },
 "One-line arrow function": {
  "scope": "javascript,typescript,javascriptreact,typescriptreact,vue",
  "prefix": "oaf",
  "body": [
   "($1) => $2",
  ],
  "description": "单行箭头函数"
 },
 "Console log": {
  "scope": "javascript,typescript,javascriptreact,typescriptreact,vue",
  "prefix": "lg",
  "body": [
   "console.log('$1 ===>', $1)",
  ],
  "description": "便于追踪调试的 console.log"
 },
 "Vue2 template": {
  "prefix": "v2",
  "body": [
   "<template>",
   "  <div>$0</div>",
   "</template>\n",
   "<script>",
   "export default {",
   // "    name: \"${1:component_name}\",",
   "  data() {",
   "    return {\n",
   "    }",
   "  },",
   "  created() {\n",
   "  },",
   "  methods: {\n",
   "  },",
   "}",
   "</script>\n",
   "<style scoped>\n",
   "</style>"
  ],
  "description": "vue2 模板"
 },
 "Vue3 template": {
  "prefix": "v3",
  "body": [
   "<script lang=\"ts\" setup>\n",
   "</script>\n",
   "<template>",
   "  <div class=\"$1\">$2</div>",
   "</template>\n",
   "<style lang=\"scss\" scoped></style>"
  ],
  "description": "vue3 模板"
 }
}

目前提供了 5 个代码片段。在开发过程中，如果你要使用某个代码片段，只需键入对应的快捷键，并按下 Tab 或 Enter 键即可生成代码片段内容。如下图所示：代码块

# VSCode

# 插件安装

# 插件配置

# 代码片段

VSCode

插件安装

插件配置

代码片段