vscode 常用插件及相关配置

敏捷前端

已于 2023-05-10 09:57:52 修改

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

文章标签： vscode

于 2022-04-02 18:19:22 首次发布

本文链接：https://blog.csdn.net/WaiteZQ/article/details/123926316

本文介绍了如何优化VSCode的配置，包括别名路径设置、代码提示插件、格式化工具、自动保存与修复等功能。推荐了如PathIntellisense、ESLint、Prettier等提升开发效率的插件，并分享了相关的设置项，以实现更智能的代码管理和编辑体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

别名路径跳转

下载后只需自定义配置一些自己常用的别名路径即可

// 文件名别名跳转
  "alias-skip.mappings": {
    "~@/": "/src",
    "views": "/src/views",
    "assets": "/src/assets",
    "network": "/src/network",
    "common": "/src/common"
  },

右击插件–》扩展设置–》路径映射在settinas.json中编辑

路径别名智能提示

插件名：path-alias
场景: 在导入组件的时候，使用别名路径没用提示时👇 (可和别名路径跳转同时使用, 无冲突)

indent-rainbow

插件名: indent-rainbow
功能：彩虹缩进

Tabnine

插件名: Tabnine
功能：智能提示代码，可以预测你将要写的代码进行提示

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

中文语言插件

Highlight Matching Tag

编辑高亮

GitHub Copilot

Auto Rename Tag

自动重命名配对的 HTML / XML 标签，也可以在 JSX 中使用。
在 settings.json 文件中的 auto-rename-tag.activationOnLanguage 中添加一项以设置扩展名将被激活的语言。默认情况下，它是**[“ *”]**，将为所有语言激活。

"auto-rename-tag.activationOnLanguage": ["html", "xml", "php", "javascript"]

koroFileHeader

用于生成文件头部注释和函数注释的插件，支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！
使用方法

Bracket Pair Colorizer 2

Color Highlight

此扩展程序设置在文档中找到的 css / web 颜色的样式。
在这里插入图片描述

CSS Peek

Image preview

悬停时显示图像预览。
在这里插入图片描述

indent-rainbow

Rainbow Brackets

：为括号设置不同颜色，方便区分
在这里插入图片描述

Auto Import

:可以自动找到、解析所有可用的导入，并提供代码操作和完成
在这里插入图片描述

Material Icon Theme

:替换VS Code标题栏中文件类型的图标
在这里插入图片描述

Better Comments

：优化注释，支持不同类型的注释变成不同的颜色
在这里插入图片描述

Path Intellisense

:自动提示文件路径和文件名

在这里插入图片描述

TODO Highlight

Vetur

vue

vue-beautify

VueHelper

open in browser

文件打开浏览器

Prettier - Code formatter

ESLint

格式化规范开发文件 settings.json 相关配置

	"eslint.nodeEnv": "",
     // tab 大小为2个空格
     "editor.tabSize": 2,
     // 100 列后换行
     "editor.wordWrapColumn": 100,
     // 保存时格式化
     "editor.formatOnSave": true,
     // 开启 vscode 文件路径导航
     "breadcrumbs.enabled": true,
     // prettier 设置语句末尾不加分号
     "prettier.semi": false,
     // prettier 设置强制单引号
     "prettier.singleQuote": true,
     // 选择 vue 文件中 template 的格式化工具
     "vetur.format.defaultFormatter.html": "prettyhtml",
     // 显示 markdown 中英文切换时产生的特殊字符
     "editor.renderControlCharacters": true,
     // eslint 检测文件类型
     "eslint.validate": ["javascript", "vue", "html"],
     // vetur 的自定义设置
     "vetur.format.defaultFormatterOptions": {
         "prettier": {
             "singleQuote": true,
             "semi": false
         }
     },
     // 修改500ms后自动保存
    "editor.formatOnSaveTimeout": 500,
     "files.autoSaveDelay": 500,
     "editor.codeActionsOnSaveTimeout": 500,
     "[javascript]": {
         "editor.defaultFormatter": "vscode.typescript-language-features"
     },
     // 设置 eslint 保存时自动修复
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": true
     },
     "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "eslint.format.enable": true,
    "editor.inlineSuggest.enabled": true,
    "auto-close-tag.activationOnLanguage": [

      "xml",
      "php",
      "blade",
      "ejs",
      "jinja",
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "plaintext",
      "markdown",
      "vue",
      "liquid",
      "erb",
      "lang-cfml",
      "cfml",
      "HTML (EEx)",
      "HTML (Eex)",
      "plist"
    ],```