VsCode 配置 | zKing的学习乐园

摘要

个人的 VS Code 配置

# 皮肤

webstrome Theme
OneDark-Pro
eva
Monokai Alt
Ayu
GitHub Dark

# 图标

vscode-icons
VSCode Great Icons

# 个人 Setting.json

// Place your settings in this file to overwrite the default settings
{
  // 编辑器 配置
  "editor.tabSize": 2,
  "editor.fontFamily": "Fira Code,Microsoft YaHei,monospace",
  "editor.fontWeight": "400",
  "editor.fontLigatures": true,
  "editor.fontSize": 13.3,
  "editor.lineHeight": 21,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.parameterHints.enabled": true,
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.multiCursorModifier": "alt",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  "explorer.confirmDragAndDrop": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "workbench.list.smoothScrolling": true,
  "workbench.colorTheme": "Ayu Mirage Bordered",
  "workbench.iconTheme": "vscode-great-icons",
  "window.zoomLevel": 0,
  "explorer.confirmDelete": false,
  "search.followSymlinks": false,
  "breadcrumbs.enabled": true,
  "files.autoSave": "off",
  "files.associations": {
    "*.vue": "vue",
    ".stylelintrc": "json"
  },
  "extensions.autoUpdate": false,
  // 启用要发送给 Microsoft 的使用情况数据和错误。
  "telemetry.enableTelemetry": false,
  // 命令行终端的配置
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.rendererType": "dom",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  // C:\\Program Files\\Git\\bin\\bash.exe
  // C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe
  // git +  gitlens 的配置
  "diffEditor.ignoreTrimWhitespace": false,
  "git.enableSmartCommit": true,
  "gitlens.advanced.messages": {
    "suppressCommitHasNoPreviousCommitWarning": true,
    "suppressCommitNotFoundWarning": true,
    "suppressFileNotUnderSourceControlWarning": true,
    "suppressGitVersionWarning": true,
    "suppressLineUncommittedWarning": true,
    "suppressNoRepositoryWarning": true
  },
  // 一些缩写用法 配置
  "emmet.showAbbreviationSuggestions": true,
  "emmet.showExpandedAbbreviation": "always",
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html",
    "wxml": "html"
  },
  // css 处理配置
  "stylusSupremacy.insertColons": true, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": true, // 是否插入分号
  "stylusSupremacy.insertBraces": true, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": true, // 两个选择器中是否换行
  "scss.lint.zeroUnits": "warning",
  "sass.lint.enable": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.enable": true,
  // JavaScript 配置
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
  "javascript.format.insertSpaceAfterConstructor": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  // Eslint 配置
  "eslint.migration.2_x": "off",
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],
  // Npm 配置
  "npm.validate.enable": false,
  "npm.runInTerminal": false,
  "npm.bin": "cnpm",
  // Vetur 和 一些语言相关文件格式化的配置
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
    }
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "html.format.endWithNewline": true,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // prettier 插件配置
  "prettier.endOfLine": "lf",
  "prettier.printWidth": 80,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  "prettier.trailingComma": "none",
  "prettier.disableLanguages": ["html"],
  // markdown lint 插件配置
  "markdownlint.config": {
    "MD024": false,
    "MD025": false,
    "MD040": false
  },
  //todo tree 插件的配置
  "todo-tree.highlights.customHighlight": {
    "TODO": {},
    "FIXME": {}
  },
  "todo-tree.highlights.defaultHighlight": {
    "foreground": "green",
    "type": "none"
  },
  "todo-tree.tree.showScanModeButton": false,
  "todo-tree.general.tags": [
    "BUG",
    "HACK",
    "FIXME",
    "TODO",
    "XXX",
    "[ ]",
    "[x]"
  ],
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
  // live server 插件配置
  "liveServer.settings.donotShowInfoMsg": true,
  // drwa.io 插件配置
  "hediet.vscode-drawio.local-storage": "eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWxcIixcImN1c3RvbUxpYnJhcmllc1wiOltcIkwuc2NyYXRjaHBhZFwiXSxcInBsdWdpbnNcIjpbXSxcInJlY2VudENvbG9yc1wiOltcIkU2RTZFNlwiLFwibm9uZVwiLFwiRkZGRkZGXCJdLFwiZm9ybWF0V2lkdGhcIjpcIjI0MFwiLFwiY3JlYXRlVGFyZ2V0XCI6ZmFsc2UsXCJwYWdlRm9ybWF0XCI6e1wieFwiOjAsXCJ5XCI6MCxcIndpZHRoXCI6ODI3LFwiaGVpZ2h0XCI6MTE2OX0sXCJzZWFyY2hcIjp0cnVlLFwic2hvd1N0YXJ0U2NyZWVuXCI6dHJ1ZSxcImdyaWRDb2xvclwiOlwiI0Q0RDBDMFwiLFwiZGFya0dyaWRDb2xvclwiOlwiIzZlNmU2ZVwiLFwiYXV0b3NhdmVcIjp0cnVlLFwicmVzaXplSW1hZ2VzXCI6bnVsbCxcIm9wZW5Db3VudGVyXCI6MCxcInZlcnNpb25cIjoxOCxcInVuaXRcIjoxLFwiaXNSdWxlck9uXCI6ZmFsc2UsXCJ1aVwiOlwiXCJ9In0=",
  "hediet.vscode-drawio.theme": "atlas"
}

# 基本配置

# 编辑器基本设置

安装自带的 JS，TS，PHP 的支持，修改默认设置

"files.autoSave": "afterDelay", //自动保存
"editor.minimap.enabled": true, //缩略图查看
"editor.fontFamily": "Consolas, 'Courier New', monospace,'宋体'",
"editor.fontSize": 14,
"editor.tabSize": 2,
"telemetry.enableTelemetry": false

# 项目设置

如果前端项目只用 js，不用到 ts 的话，可以使用 jsconfig.json 文件来帮助 vscode 更好地识别文件别名路径

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    }
  },
  "include": ["./**/*"]
}

# 修改键盘快捷键

将格式化代码改成 ctrl+alt+L 将打开终端换成 alt + `

快捷键大全，点击这里

附加常用的快捷键

ctrl + D 选中单词，连续点击可以选择一样的单词
ctrl + P 快速搜索并打开文件
ctrl + H 替换 Replace
ctrl + \ 拆分编辑器
alt ↑↓ 将整行代码上下移动
alt + shift + ↑↓ 复制整行代码并上下移动

Ctrl + Shift + Space  触发参数提示

F1 打开快捷命令
F8 快速定位到文件中的错误
F12 找到定义

# 关于快速编写代码的插件

# HTML

HTML Snippets
- 超级实用且初级的 H5 代码片段以及提示
HTML CSS Support
- 让 html 标签上写 class 智能提示当前项目所支持的样式
Atuo Rename Tag
- 修改 html 标签，自动帮你完成尾部闭合标签的同步修改

# CSS

CSS Peek
- 查找对应的 css
color picker
- 颜色拾取器，有点 bug
stylus
- 支持 stylus 语法
language-stylus
- 支持 stylus 语法
Manta's Stylus Supremacy
- 格式化 stylus 语法
stylelint
- 对 CSS 进行校验

# JavaScript

ESLint
- 保持代码风格
eslint-disable-snippets
Prettier
- 快速美化代码格式

# TypeScript

Paste JSON as Code
- 快速将 json 转换为 ts 的类型系统

# Node

Node.js Modules Intellisense
- 便捷导入包
npm
- 根据 package.json 中定义的依赖关系验证已安装的模块。

# Webpack

Webpack Snippets
- 快速编写 webpack 配置文件

# Vue2.x

Vue 2 Snippets
- 快速编写
Vue VSCode Snippets
- 快速编写
vetur
- vue2 语法高亮、智能感知、Emmet 等
Vue Peek
- 可以直接从标签名跳转到组件中

# Vuex3.x

Volar
- vue3 语法高亮、智能感知、Emmet 等

# Vue3

# Markdown

Markdown Preview Enhanced
- 预览 Markdown
Markdown All in One
- Markdown 快捷键
markdownlint
- Markdown 格式提示

# Git

Git History
- 快速查看 git.log 和操作
.gitignore Generator
- 生成 .gitignore 文件
gitignore 1.0.1
- 右键将文件路径写入到 .gitignore 文件中
GitLens — Git supercharged
- 用来查看不同成员的提交

# 其他插件推荐

Code Debugger 无需配置 launch.json 即可进行单文件调试，支持 JS、TS、Python、Dart、Coffeescript、Go、C/C++、Rust、Bash、Lua。
Live Server 配置一个网页服务器，修改完代码之后只需要保存代码浏览器就可以实时预览，方便实时浏览 HTML 文件
Path Intellisense 路径自动补全
vscode-fileheader 使用 ctrl + alt + i 快捷键可以快速在文件头部写注释
Bracket Pair Colorizer 为不同的“括号”进行调色，方便查看代码块（虽然 vscode 后续的版本已支持了颜色括号，但是总感觉颜色搭配有点奇怪）
Todo Tree 设置 todo，快速跳转到需要完善的部分
change-case 快速将转换单词写法，比如将大驼峰转成全大写 VsCode => VS_CODE
REST Client 可以编写 .http 文件来快速进行接口请求
SVG Viewer 预览 svg 文件内容
EditorConfig for VS Code 统一团队不同编辑器的编写风格

# 自定义用户代码片段

Vscode 也支持用户针对某类语言，通过快捷输入来注入代码片段，以我自己写的 vtsx 快捷输入为例

{
  "vue-tsx": {
    "prefix": "vtsx",
    "body": [
      "<script lang=\"tsx\">",
      "import { Component, Vue } from 'vue-property-decorator';",
      "",
      "@Component",
      "export default class ChildComp$0 extends Vue {",
      "  render() {",
      "    return <section></section>;",
      "  }",
      "}",
      "</script>",
      "",
      "<style lang=\"scss\" scoped></style>",
      ""
    ],
    "description": "快速设置 vue+tsx"
  }
}

具体解释可以看这篇文章