VsCode插件

最新推荐文章于 2024-09-30 15:04:33 发布

三水木雨

最新推荐文章于 2024-09-30 15:04:33 发布

阅读量5.6k

点赞数 2

分类专栏： vue 文章标签： vscode 编辑器

本文链接：https://blog.csdn.net/qq_50276105/article/details/127636666

版权

vue 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

编辑切换为居中

添加图片注释，不超过 140 字（可选）

1、Auto Close Tage

自动补全

2、Auto Rename Tag

重命名一个HTML / XML标签时，自动重命名配对的HTML / XML标签

3、background-cover

给vs code设置背景图片

4、Bracket Paire Colorizer

高亮，已弃用，因为vscode本身有

5、color info

这个便捷的颜色管理插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了，简直太方便了哦。

6、Community Material Theme

主题颜色

7、debug for chrome已经弃用，改用

JavaScript Debugger：自动纠错

8、filesizse

查看文件大小

9、GitLens — Git supercharged

GitLens — Git supercharged插件，有时候，文件被改了某一处，真的很烦，是不是想找到改你文件的人，上去暴揍一顿，这个时候你就需要这个傻瓜插件了，安装后重启，然后将鼠标单击放在被修改的那一处

10、HTML Boilerplate

它的作用就是可以很快的生成HTML5的基本结构，可以提高我们日常开发中的效率

11、HTML CSS Support

12、HTML Snippets

这是一款前端开发者必备的扩展，它能将你从手动键入每个标签中解放出来。只需输入 div 然后按下回车，一对标签就出现了。更厉害的是，对于需要嵌套的标签，你可以直接用 ul>li>a 的格式表示，按下回车后就能看到你需要的嵌套。还有一点，这个扩展已经包括所有的 HMTL5 片段。

13、HTMLHint

HTMLHint 工具内置 23 条规则，可以对 HTML 代码文件进行静态代码检查，从而提高 HTML 代码编写的规范和质量。

14、Icon Fonts

通过一些缩写，能够快速补全icon fonts相关的代码片段，这样能够减少80%以上的手动输入内容。

15、JavaScript (ES6) code snippets

avaScript (ES6) code snippets。该插件包含十几个代码片段，你可以使用它们来为你快速生成 ES6 代码片段。

例如，输入 clg 然后按Enter，将生成console.log。

16、 markdown-formatter

使用 shift+option+f (osx) 或者 ctrl+shift+f (window) 快速格式化

17、Material Icon Theme

是VSCode文件图标，安装后的效果如下

18、Material Theme

18、Material Theme Icons

Material Theme Icons 是替换默认 VSCode 图标的绝佳选择。设计的大型图标目录与主题融为一体，使其更加美观，这有助于你在资源管理器中轻松找到你的文件。

19、open in browser

可以设置编译的默认浏览器

20、Path Intellisense

在写vue代码的时候,希望输入@,也能加载对应的资源,可以利用 path-intellisense

点击Extension Settings后添加配置

复制添加到path-intellisense的配置里去

    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    }

接下来,在你的vue或react项目里添加一个配置文件
在你的项目根目录下新建: jsconfig.json文件,紧接着,复制,没错,比擅长的复制大法.

{
  "compilerOptions": {
    "experimentalDecorators": true, 
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"],
      "assets/*": ["src/assets/*"],
      "views/*": ["src/views/*"],
      "common/*": ["src/common/*"],
    }
  },
  "exclude": ["node_modules", "dist"]
}

20、 Prettier - Code formatter

安装完成后在项目的根目录会多一个.prettierrc.js文件

21、vetur

显示高亮，多个格式化