[toc]

VSCode

安装路径： C:\Users\hewei\AppData\Local\Programs\Microsoft VS Code

`jsconfig.json` 文件配置

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "vueCompilerOptions": {
    "target": 2 // 如果安装了 volar 需要兼容 vue2
  },
  "exclude": ["node_modules", "dist"]
}

文件所在目录下的所有 js 代码做出个性化支持

可以排除 node_modules 文件夹提升性能
让可以识别 webpack 配置的 别名 @，这样可完成文件跳转配置, （vue 文件也适用）

配置完成后要重启一下当前 vscode 项目

用 import 引入的 vue 文件如果不加后缀名还是无法用（ctrl+左键）的方式进入文件

示例在 vue-three-admin 项目中

用户配置说明

.vscode/settings.json 下创建，单个项目独有的配置

settings.json（用自带的 Settings Sync 共享配置）

{
  // 定义 VSCode 的显示语言
  // 请参阅 https://go.microsoft.com/fwlink/?LinkId=761051，了解支持的语言列表
  // 更改此值需要重启 VSCode
  "locale": "en-US",
  "workbench.colorTheme": "Monokai",

  /* 启用/禁用 vscode-eslint 默认情况下是启用的 */
  "eslint.enable": true,
  "eslint._legacyModuleResolve": true,
  "eslint.alwaysShowStatus": true,

  /* 保存时 格式化  这个如果加了eslint 格式化 需要关一下 */
  "editor.formatOnSave": true,
  /* 启用括号对 引导线 */
  "editor.guides.bracketPairs": "active",
  // 在保存时自动修复
  "editor.codeActionsOnSave": {
    /* 所有的自动修复都执行 */
    "source.fixAll": "explicit",
    /* 只有eslint的自动修复执行 */
    "source.fixAll.eslint": "explicit"
  },

  //eslint 配置解释可以setting查看
  "editor.fontSize": 16,
  // 使如下语言生效
  "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
  // 地址中为双斜线
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "terminal.external.windowsExec": "C:\\Windows\\System32\\cmd.exe",
  // 装了插件后可以不配置
  "markdown.styles": ["C:\\Program Files (x86)\\Microsoft VS Code\\github.css"],
  // 拼写检测支持vue文件
  "cSpell.enabledLanguageIds": ["vue", "html"],
  // Path intellisense 识别路径中的特殊符号，以便于给出子目录提示
  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  },
  // vue-helper Element-UI, VUX, IVIEW  扩展  以及组件、函数文件跳转
  "vue-helper.alias": {
    "@": "src/*"
  }
}

插件

插件使用

AutoComplate shell 自动补全 shell
Code Runner 右键直接运行代码
Code Spell Checker 检查拼写
Draw.io 创建 xx.Drawio 文件进行操作
ESLint 代码风格校验
color highlight 颜色高亮
Live Server：启动一个本地服务，访问相关 html 文件
Setings Sync：插件同步，查看下面的插件迁移介绍
Draw.io：画流程图插件
svg viewer：svg 图片查看
Vetur：vue 插件
code spell checker: 检查拼写注意添加要检测的文件 "cSpell.allowCompoundWords": true 允许使用一些网络单词
【vs code counter】: 检测代码行数
【Add jsdoc comments】: 添加 jsdoc 注释
- 选中函数按 f1 选择 'Add doc comments'
【koroFileHeader】: 用于生成文件头部注释和函数注释的插件
- 函数注释 ctrl + win + t
【Visual Studio Code Commitizen Support】: commitLint 校验
Path Intellisense 补全文件路径和提示 https://github.com/ChristianKohler/PathIntellisense
tabnine 代码 AI 补全
CSS Navigation 选中 class 右键跳转到定义的地方
Turbo Console Log
ctrl + alt + L 插入 log alt + shift + c 注释所有 log alt + shift + u 取消注释所有 log alt + shift + d 删除所有 log
i18n Ally 在 setting.json 中配置，推荐翻译文件用 json格式 https://github.com/lokalise/i18n-ally/wiki/Locale-Formats 配置文件 https://github.com/lokalise/i18n-ally/wiki/Configurations

文件嵌套如下

|- en
  |- page1.json
  |- page2.json
|- zh
  |- page1.json
  |- page2.json

{
  "i18n-ally.localesPaths": [
      "lang/locale/", /* 配置语言目录 */
  ],
  "i18n-ally.keystyle": "nested",
}

插件迁移

用自带的 Settings Sync 共享配置

snippets

用自带的 Settings Sync 共享配置

位置 C:\Users\hewei\AppData\Roaming\Code\User\snippets
自定义 https://code.visualstudio.com/docs/editor/userdefinedsnippets

ctrl+shift+p => configure user snippets => 选择对应的语言进行编写

body 用数组，每一项的值表示一行代码

.vue 文件中写的 js 代码片段还是要写到 JavaScript.json 中，而不是写到 vue.json 中

快捷键

ctrl+d 选中当前单词连续操作可选中下一个相同单词
Ctrl+Shift+u 单词转大写（自定义）
Ctrl+Shift+l Ctrl+Shift+o 单词转小写（自定义）
Ctrl+Shift+c Ctrl+Shift+m 单词转驼峰（自定义）需要空格或-等来作为标识 sjis-sss => sjisSss
koroFileHeader 快捷键文件头部注释快捷键 ctrl+win+i 函数注释快捷键 ctrl+win+t
console.log ctrl + alt + L 新建 alt + shift + d 删除所有

Ctrl+P

直接输入文件名，快速打开文件
? 列出当前可执行的动作相当于帮助
! 显示 Errors 或 Warnings，也可以 Ctrl+Shift+M
: 跳转到行数，也可以 Ctrl+G 直接进入
@ 跳转到 symbol（搜索变量或者函数），也可以Ctrl+Shift+O直接进入
@:根据分类跳转 symbol，查找属性或函数，也可以 Ctrl+Shift+O 后输入:进入
# 根据一级标题二级标题查找，markdown 标题，也可以Ctrl+T

# VSCode

# jsconfig.json 文件配置

# 用户配置说明

# 插件

# 插件使用

# 插件迁移

# snippets

# 快捷键