前端开发必备的VSCode插件

最新推荐文章于 2024-03-16 18:11:12 发布

ZD717822023

最新推荐文章于 2024-03-16 18:11:12 发布

阅读量3.6k

点赞数 7

分类专栏：前端工具文章标签：编辑器 javascript

本文链接：https://blog.csdn.net/zd717822023/article/details/112446722

版权

前端工具专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文总结了一下前端开发人员一些经常用的可以提高开发效率的VSCode插件，好的工具可以事半功倍。主要分为：基础通用篇，自由可选篇，框架工具篇，主题篇（按照我自己的想法分的）

基础通用篇

Chinese

vscode编辑器汉化包，安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。
在这里插入图片描述

Auto Rename Tag

自动重命名成对的HTML标记，修改开始标签，结束标签会同步修改。
在这里插入图片描述

Auto close tag

自动闭合 HTML / XML 标签，非常快速的编写 HTML 代码。
在这里插入图片描述

Material icon theme

VSCode文件图标,根据文件类型展示不同图标。
在这里插入图片描述

koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，使用简单！（可以查询一下配置）
在这里插入图片描述

TODO Highlight

高亮展示TODO
在这里插入图片描述

TODO Tree

我们经常会在代码中使用TODO来标记我们的代码，提高可读性，TODO Tree提供在VSCode 树形图标里面显示打上TODO标记的文件。
在这里插入图片描述

GitLens

详细的 Git 提交日志。Git 重度使用者必备，尤其是多人协作时：哪一行代码，何时、何人提交都有记录。再也不用担心背锅了！
在这里插入图片描述

Git History

GitHistory可查看和搜索git日志以及图形和详细信息，同时还支持分支比较，分支管理等操作，非常方便。
在这里插入图片描述

JavaScript (ES6) code snippets

该插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6语法支持。ES6 语法智能提示及快速输入，不仅仅支持 .js，还支持.ts，.jsx，.tsx，.html，.vue。
在这里插入图片描述

ESLint

JavaScript 语法纠错，可以自定义配置，也可以参照官网的配置，摆正开发者的代码格书写格式。（语法配置很多正在研究中。。。）
在这里插入图片描述

TSlint (注意：TSLint将在2019年废弃，TSLint官方推荐使用ESLint)

在这里插入图片描述

Prettier

代码格式工具，和esLint不同在于，ESLint只是一个代码质量工具(确保没有未使用的变量、没有全局变量，等等)；而Prettier只关心格式化文件(最大长度、混合标签和空格、引用样式等)。可见，代码格式统一的问题，交给Prettirer再合适不过了。和Eslint配合使用，风味更佳。
在这里插入图片描述

Beautify

Beautify是格式化代码的插件可美化JS、JSON、CSS、Sass、HTML（其他类型的文件不行），可在文件夹根目录下创建 .jsbeautifyrc 文件。一般用Eslint + prettier + beautify组合使用 ，Beautify格式化vue的html部分。
在这里插入图片描述

Stylelint

StyleLint 是『一个强大的、现代化的 CSS 检测工具』, 与 ESLint 类似, 是通过定义一系列的编码风格规则帮助我们避免在样式表中出现错误。stylelint是运行工具，stylelint-config-standard是stylelint的推荐配置，stylelint-order是CSS属性排序插件(先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性)。
在这里插入图片描述

Better comments（代码注释高亮）

在这里插入图片描述

Document This

添加注释快
marketplace.visualstudio.com/items?itemN…
此插件可以统一大家的注释块，可统一生成注释文档
快捷键: ctrl+alt+dd(连续按两次d)
设置文件中还可配置：
“docthis.includeAuthorTag”: true,//出现@Author
“docthis.includeDescriptionTag”: true,//出现@Description
“docthis.authorName”: “shenzekun”,//作者名字
在这里插入图片描述

自由可选篇

Markdown All in One

这款神器可以让我们在vscode里面快乐的书写Markdown，功能强大。提供了丰富的快捷键，可边写边看，轻松转化为html或pdf文件，十分好用，强烈推荐。
（我平时主要就是用它编写边看写readme文档，预览快捷键command+shift+v）
在这里插入图片描述

HTML Snippets

HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了（一般适用于新手前端开发）。
在这里插入图片描述

open in browser

从浏览器中查看html文件，使用系统的当前默认浏览器。默认的快捷键Ctrl+1,可以自定义修改。（适用于平时写一些静态页面）
在这里插入图片描述

vscode-fileheader

顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间（只安装koroFileHeader也可以）
在这里插入图片描述

Language-Stylus

对stylus的支持和格式化，如项目中没有请忽略
在这里插入图片描述

Live Server

如果我们是在做一个静态页排版，这个插件可以提供给我们一个本地实时预览服务器，预览会在谷歌浏览器打开。。右键“Open With Live Server”开启。
在这里插入图片描述

Path Intellisense

文件自动补全功能，加入此插件让我们在应用文件（例如图片）时，有智能的路径提示。
在这里插入图片描述

vscode-icon

让 vscode 资源树目录加上图标，必备良品！这一款是VSCode官方的图标主题包，有超过500万+下载量。与Material Icon最大的区别在于文件夹。
在这里插入图片描述

cssrem

在这里插入图片描述

px2rem

px换成rem的插件
在这里插入图片描述

CSS Peek

调试css样式的必备插件,鼠标放在类名，id上的时候，显示出此类型下的css样式，并可以直接跳转到css文件。在这里插入图片描述

Bracket Pair ColorZer

颜色识别匹配括号
在这里插入图片描述

Indenticator

突出目前的缩进深度
在这里插入图片描述

Project Manager

如果你的公司有非常多项目，需要来回切换的话，推荐Project Manage可以让你轻松在项目直接替换，无需在导入项目文件夹打开。
在这里插入图片描述

Settings Sync

如果你有多台设备，或者以后不想在重新配置vscode，推荐你用Settings Sync，将vscode上传到gist，以后登录账号就可以一键完成。
在这里插入图片描述

project-tree

在README.md里面自动追加生成项目树状图；很好用，使用简单；

在项目下 Shift + Cmd + p
输入：Project tree
回车

在这里插入图片描述

框架工具篇

VUE

Vetur

开发Vue的童鞋必装插件之一。支持标签、属性的智能补全等等。
在这里插入图片描述

Vue 2 Snippets

这个插件加入了Vue2的代码块，让我们开发的过程中可以快速生成Vue2的代模版。
在这里插入图片描述

Angular

Angular Extension Pack

最全的全家桶之一，里面包括各种你需要的插件，基本安装它一个就可以了。
在这里插入图片描述

Angular Language Service（1中已包括）

超好用的从模板（html）F12一键定位变量定义位置

Angular 10 Snippets（1中已包括）

React

ES7 React/Redux/GraphQL/React-Native snippets

这个扩展为你提供了JavaScript和ES7中的React/Redux代码片段，以及VSCode的Babel插件特性。编写React的童鞋，这个插件是必备之一。
在这里插入图片描述

React.js code snippets

用ES6语法去开发React.js应用非常方便。

小程序

minapp-vscode

微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021021623002413.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pENzE3ODIyMDIz,size_16,color_FFFFFF,t_70

NPM

NPM（NPM支持）

这个扩展支持运行包中定义的npm脚本。并根据包中定义的依赖项验证已安装的模块。最喜欢这个插件的功能就是可以自动检测依赖是否安装，还可以提示依赖的版本和具体项目地址。使用npm的童鞋必备插件之一。
在这里插入图片描述

npm Intellisense（NPM智能提示）

加入此插件可以让我们在编写JavaScript的时候有npm依赖包的提示。特别是引用的过程中会有丰富的提示。
在这里插入图片描述

常用主题篇

Dracula Theme（Dracula Official）

这款主题主调色是偏深紫色，里面代码的高亮和颜色都很细致，很适合长期看。这个主题的颜色有根据不同的语言做了适配，无论我们是在开发什么语言都非常好看。
在这里插入图片描述

Material Theme（Material Theme）

这款也是非常出名的主题，在非常多的IDE/编辑器都有。用习惯这个主题的可以在VSCode中安装使用。使用量也是有200多万+。
在这里插入图片描述

Nebula Theme（Nebula Theme）

这一款是小众主题。配色与Dracula非常相似，但是有更多的亮色，颜色的变化幅度也没有那么大，相比Dracula更为顺眼。当然这个也要看个人喜好。
在这里插入图片描述

Atom One Dark Theme（Atom One Dark Theme）

有一部分小伙伴特别喜欢这个主题。
在这里插入图片描述

One Monokai Theme（One Monokai Theme）

对长期使用SublimeText的Monokai的童鞋们，对这款主题应该感兴趣。毕竟Monokai主题陪伴了我们挺长一段时间的。（不好了要暴露年龄了😂）
在这里插入图片描述

GitHub Plus Theme（GitHub Plus Theme）

终于有一个白色的主题了，个人对白色的主题不怎么适应。但是毕竟还是有童鞋特别喜爱白色的。
在这里插入图片描述

ZD717822023

关注

7
点赞
踩
30

收藏

觉得还不错? 一键收藏
2
评论
前端开发必备的VSCode插件

本文总结了一下前端开发人员一些经常用的可以提高开发效率的VSCode插件，好的工具可以事半功倍。主要分为：基础通用篇，框架工具篇，自由可选篇（按照我自己的想法分的）基础通用篇1. Chinesevscode编辑器汉化包，安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。2. Auto Rename Tag自动重命名成对的HTML标记，修改开始标签，结束标签会同步修改。3. Auto close tag自动闭合 HTML / XML
复制链接

扫一扫