vscode最常用插件

常用插件：

如果喜欢中文就安装中文，如果不喜欢就自动忽略.

1、chinese

2、Open-In-Browser

这个是必须安装的打开浏览器看效果使用的快捷键是alt+b

3、Prettier

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier – Eslint 插件，你可不要错过咯！

快捷键是 shift+alt+f

ps：默认是双引号 如果项目需要将双引号设置为单引号可以查看我的另外一篇博客地址自行去设置

https://blog.csdn.net/weixin_43595461/article/details/117514752?spm=1001.2014.3001.5502

4、ESlint

ESlint接管原声js提示，可以自定制体会规则。这个比较高玩

5、Color Info

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

6、TODO Highlight

这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。

7、Color Highlight

直接可以在页面中查看都是什么样色正如上图所示真的非常好用

8、vscode-icons

这个主题其实还不错

9、HTML CSS Support

让HTML标签上写class智能提示当前项目所支持的样式

10、JQuery Code Snippets

jquery提示工具用到jq的时候再安装吧，现在安装起来提示样式的内容太多了

11、Path Intellisense

自动路径补全、默认不带这个功能

12、Npm Intellisense

require 时的包提示

13、Document this

Js的注释模板

14、Typings Installer

安装vscode 的代码提示依赖库，基于typtings的，比如提示angular或者jQuery只能感知、至于什么是typtings自己去百度。

15、Bootstrap 4 Sinnpet

常用bootstrap的可以下

16、Auto Rename Tag

修改html标签，自动帮你完成尾部闭合标签的同步修改，和webstorm一样。

17、JavaScript Atom Grammar

使用atom风格的语法高亮、对于习惯浏览atom风格代码高亮的人实用。

这个看个人需求吧。不是一定需要下载的

18、code runner

这个是好东西，且用且珍惜。

19、Easy less

使用less的盆友一定要安装这个，不要安装错了。也有sass等等...自行百度

20、Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

21、Bracket Pair Colorizer

让括号拥有独立的颜色，易于区分。可以配合任意主题使用。

22、Image preview

悬停时显示图像预览

23、 koroFileheader 头部注释

效果如下图：

详细设置请跳转如下地址：

https://blog.csdn.net/weixin_43595461/article/details/117992019

24、 vscode代码片段

https://www.cnblogs.com/susu-yee/p/11533546.html

1.点击左下角设置图标，用户代码片段.

2.在搜索框里面创建 vue.json

3.在对象里面复制以下代码块也就是复制粘贴

{"Print to console": {"prefix": "vue","body": ["<template>","    <div>\n","    </div>","</template>\n","<script>","export default {","    data() {","        return {\n","        };","    },","    created() {\n","    },","    mounted() {\n","    },","    methods: {\n","    }","};","</script>\n","<style scoped lang=\"${1:less}\">\n","</style>\n",],"description": "Create vue template"}
}

25、自定义代码颜色效果+步骤如下

效果

1.点击左下角设置

2.在搜索框中输入settings 然后点击在settings.json中编辑如下图

3.复制下面代码这是我自己习惯的代码风格我只把函数名的颜色变成了红色其他没改变如果需要改自己可以尝试一下

    "editor.tokenColorCustomizations": {// "comments": "#82e0aa", // 注释// "keywords": "#0a0", // 关键字// "variables": "#EAC863", // 变量名// "strings": "#e2d75dbd", // 字符串"functions": "#EF3D26", // 函数名// "numbers": "#AE81FF" // 数字},// 选中高亮的颜色"workbench.colorCustomizations": {//  "editor.selectionBackground": "#aa0000"}

vscode最常用插件相关推荐

vscode前端常用插件
vscode前端常用插件文章目录 vscode前端常用插件 1. Live Server 1.1 Live Server的使用 2. rest client 3. GitLens 4. CSS pe ...
vscode前端常用插件整理（vuejs）
VsCode可以通过安装插件来使编辑器变的更加强大以下为前端开发工程师常用插件 (1)HTML Snippets 超级实用且初级的 H5代码片段以及提示 (2)HTML CSS Support 让 ...
VSCode 前端常用插件集合
Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱. 但工欲善其事必先利其器,以下是本人为前端开发收集的常用的vs ...
vscode必备常用插件
前言这篇文章只要让你做一些基础的配置,把vscode变得更加顺手: 插件的需求不是一成不变,比如在新版就已集成的就可以移除了. 必备插件功能性 Auto Close Tag : 匹配标签,关闭对应 ...
vscode 前端常用插件推荐
[配置教程戳这里](() 4.Bracket Pair Colorizer (必备) 给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色 5.Debugger for C ...
Vscode——开发常用插件分享
一.使用vscode插件干什么? vscode插件是为了更高效的代码开发,为了美观的代码格式. 下面推荐一些好用的插件 1.简体中文语言包插件名称:Chinese (Simplified) (简体中 ...
vscode个性化常用插件推荐
VSCode中文简体包(汉化) 插件名:Chinese (Simplified) Language Pack for Visual Studio Code 这个插件一键把整个VSCode的文字转换成中 ...
VSCODE编辑器常用插件推荐
Auto Close Tag - 自动闭合HTML标签 Auto Rename Tag - 修改HTML标签时,自动修改匹配的标签 background - 背景 beautify- javascri ...
VSCode 工具常用插件
1.Debugger for Chrome 方便运行代码,浏览器打开 2. GitLens - Git supercharged 鼠标放到代码行上可以显示,改行的上一次修改记录 3.Git Histo ...

vscode最常用插件

常用插件：

vscode最常用插件相关推荐

最新文章

热门文章