Vscode 配置

需要安装的插件

volar Vue 生态相关支持

editor 规范代码

prettier 规范代码

项目 vscode 配置文件

//项目根目录
.vscode
|- settings.json

settings.json

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[js]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.wordWrapColumn": 160,
  "volar.formatting.printWidth": 160,
  "editor.formatOnSave": true
}

Editor

项目根目录添加 .editorconfig 文件,内容如下：

# http://editorconfig.org
root = true

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

Prettier

项目根目录添加 .prettierrc 文件,内容如下：

{
  "semi": false,
  "singleQuote": true,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "requirePragma": false,
  "printWidth": 160,
  "trailingComma": "es5"
}

快捷键

快速搜索

跨文件搜索，类似 ctrl + p %

可以在键盘映射搜索快速搜索配置成 Alt + F