VScode常用插件

置顶 [chao]

已于 2022-12-09 20:06:11 修改

阅读量880

点赞数

分类专栏：工具文章标签：前端

于 2022-09-30 17:21:46 首次发布

本文链接：https://blog.csdn.net/kjc513/article/details/127125067

版权

工具专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、必备类

1、Chinese（simplified）

6、Tabnine AI Autocomplete for xxx

7、Vetur、Volar

8、JavaScript console utils

9、css peek

三、美化类

1、Hightlight Matching Tag

2、Color Highlight

3、Better Comments

4、Indent-rainbow

5、vscode-icons、material-theme-icons

6、Community Material Theme

1、Markdown Preview Enhanced

2、Image preview

3、SVG preview

4、AZ AL Dev Tools/Al Code Outline

5、Postcode

6、project manager

一、必备类

1、Chinese（simplified）

中文（简体）语言包

设置：快捷键ctrl shift p，输入configure language，选择zh-cn，最后重启vscode即可

2、open in broswer

作用：确保能在浏览器浏览
相关配置：

"open-in-browser.default": "chrome",

3、live Server

作用：本地启动一个本地服务，并打开html，能够实时刷新
相关配置：

"liveServer.settings.CustomBrowser": "chrome",

"liveServer.settings.host": "localhost",

二、效率类

1、npm Instellisense

导入依赖时智能提示

2、Path intellisense

输入文件路径时智能提示

3、Auto Close Tag

自动补全闭合标签

4、Auto Rename Tag

对于html/xml的双标签，修改其中一侧，会同步另一侧的更改

5、Auto-import

使用某模块的变量时，提示导入该模块

6、Tabnine AI Autocomplete for xxx

提供各种代码提示。

7、Vetur、Volar

提供vue语法提示

8、JavaScript console utils

选中需要打印的内容 ctrl+shift+L

清除所有 ctrl+shift+D

9、css peek

ctrl+ 点击id/class，可快速定位到相应的css位置

三、美化类

1、Hightlight Matching Tag

高亮与当前选中内容对应的标签

2、Color Highlight

预览CSS颜色

3、Better Comments

丰富注释颜色

相关配置 "better-comments.tags"

4、Indent-rainbow

彩虹缩进

5、vscode-icons、material-theme-icons

提供文件图标样式

6、Community Material Theme

提供vscode主题风格

四、格式类

1、ESlint、TSlint

规范js、ts书写规则

2、prettier

代码美化

 "editor.defaultFormatter": "esbenp.prettier-vscode", /*配置html css js的默认格式化程序*/
 "prettier.printWidth": 140, // 超过最大值换行
  "prettier.tabWidth": 2, // 指定一个制表符等于的空格数
  "prettier.useTabs": false, // 缩进使用tab，不使用空格
  "prettier.semi": true, // 句尾添加分号
  "prettier.singleQuote": true, // 使用单引号代替双引号
  "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
  "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号；always:保留小括号
  "prettier.bracketSpacing": false, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "prettier.eslintIntegration": false, // 不让prettier使用eslint的代码格式进行校验
  "htmlWhitespaceSensitivity": "ignore", //
  "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  "prettier.bracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
  "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
  "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
  "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "prettier.tslintIntegration": false, // 不让prettier使用tslint的代码格式进行校验
  "prettier.singleAttributePerLine": false, // HTML元素有多个属性，每个属性格式化为单独一行
  "editor.formatOnSave": true // 每次保存的时候将代码按格式进行修复

3、koroFileHeader

添加表头注释

"fileheader.customMade": {
    //此为头部注释
    "Description": "",
    "Version": "1.0",
    "Author": "name",
    "Date": "",
    "LastEditors": "name",
    "LastEditTime": ""
},