Visual Studio Code 扩展

Auto Close Tag
- 自动添加 HTML / XML 关闭标签
- 插件地址
Auto Rename Tag
- 自动重命名配对的 HTML / XML 标签
- 插件地址
Auto Import
- 自动查找，解析并提供所有可用导入的代码操作和代码完成。与 Typescript 和 TSX 一起使用
- 插件地址
Import Cost
- 在编辑器中显示导入/需要包的大小（PS：小内存用户不建议使用，说的就是你这个用 8G 的）
- 插件地址
Image preview
- 在行号边上、悬停时显示图像预览
- 插件地址
Path Intellisense
- 自动补全文件名
- 插件地址
npm Intellisense
- 可自动完成导入语句中的 npm 模块
- 插件地址
Chinese (Simplified) Language Pack for Visual Studio Code
- 适用于 VS Code 的中文（简体）语言包
- 插件地址
Bracket Pair Colorizer
- 为匹配的括号着色
- 插件地址
EditorConfig for VS Code
- 增加对 .editorconfig 的支持
- 插件地址
env-cmd-file-syntax
- .env 文件键值字符串高亮
- 插件地址
Code Spell Checker
- 代码拼写检查
- 插件地址

webpack 项目识别 alias

在项目根目录新建 jsconfig.json 或 tsconfig.json
添加以下代码，其中 paths 字段的值要与你项目配置的 alias 一致

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

推荐配置

// 将设置放入此文件中以覆盖默认设置
{
  "files.autoSave": "off",
  "files.autoSaveDelay": 1500,
  "editor.tabSize": 2,
  // 关闭快速预览
  "editor.minimap.enabled": true,
  "editor.wordWrap": "on",
  "editor.lineNumbers": "on",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // bug控制缩进不关tabSize修改无用
  "editor.detectIndentation": false,
  // 保存格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    // "source.organizeImports": true,
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  // eslint 配置
  "eslint.options": {
    "extensions": ["js", ".vue"]
  },
  "eslint.format.enable": true,
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "javascriptreact",
    "jsx",
    "typescript",
    "typescriptreact"
  ],
  "prettier.semi": false,
  // 是否使用单引号
  "prettier.singleQuote": true,
  "prettier.printWidth": 100,
  "prettier.packageManager": "yarn",
  "prettier.trailingComma": "none",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.colorTheme": "Bluloco Dark",
  // 编辑器配置
  "workbench.iconTheme": "material-icon-theme",
  "workbench.editor.enablePreview": false,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "javascript": "javascriptreact",
    "wxml": "html"
  },
  // 搜索配置
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "gitlens.keymap": "alternate",
  "explorer.confirmDragAndDrop": false,
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 80, // No line exceeds 100 characters
      "singleQuote": false // Prefer double quotes over single quotes
    },
    "prettier": {
      // 是否添加分号
      "semi": false,
      // 是否使用单引号
      "singleQuote": true,
      "eslintIntegration": true,
      "parser": "babylon"
    }
  },
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.vue": "vue"
  },
  // 微信小程序
  "minapp-vscode.disableAutoConfig": true,
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 4px",
          "borderStyle": "solid",
          "borderColor": "LightSkyBlue",
          "borderRadius": "5px"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 4px 0 0",
          "borderStyle": "solid",
          "borderColor": "LightSkyBlue",
          "borderRadius": "5px"
        }
      }
    }
  },
  "less.compile": {
    "outExt": "wxss"
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "markdownlint.config": {
    "MD001": false,
    "MD024": false,
    "MD033": false
  },
  "scm.defaultViewMode": "tree",
  "settingsSync.ignoredSettings": [
    "window.zoomLevel",
  ],
  "cSpell.ignoreWords": [
    "antd",
    "ahooks"
  ]
}

Visual Studio Code 扩展

On this page