VS code必备前端插件

VS code必备前端插件 

切换语言

安装完成后,默认显示英文,我们可以通过安装中文语言包插件来显示中文,操作如下:

打开vscode,点击插件图标(或 ⌘ + ⇧ + X),在搜索框中输入“chinese”,安装

38、VS code必备前端插件

使用快捷键“⌘ + ⇧ + P”打开vscode的命令框,输入display,点击“Configure Display Language”,切换语言

38、VS code必备前端插件

更换主题

如果不喜欢VS code本身的主题色,也可以更换默认主题,在命令框中输入color theme,回车,会进入主题列表,通过上下键切换主题,还不满足,没关系,点击安装其他颜色主题,在左侧会出现各式各样的主题插件,选择一个安装即可。

38、VS code必备前端插件

添加图标

推荐一款图标插件vscode-icons,安装成功后,会根据不同的文件类型添加不同的图标样式,看起来会更有趣。

38、VS code必备前端插件

添加代码片段

  • 打开用户片段

38、VS code必备前端插件

  • 点击新代码片段,输入框中输入片段名称

38、VS code必备前端插件

38、VS code必备前端插件

  • 输入自定义代码片段

38、VS code必备前端插件

  • 代码中使用,输入vue3-template,选择新建的片段

38、VS code必备前端插件

38、VS code必备前端插件

Auto Close Tag

自动闭合 HTML/XML 标签

38、VS code必备前端插件

38、VS code必备前端插件

Auto Rename Tag

自动重命名 HTML/XML 标签

38、VS code必备前端插件

38、VS code必备前端插件

Autoprefixer

解析CSS并自动添加前缀

38、VS code必备前端插件

38、VS code必备前端插件

Bracket Pair Colorizer

用于着色匹配括号,让你的代码分层更清晰

38、VS code必备前端插件

38、VS code必备前端插件

Code Runner

运行代码片段或多种语言的代码文件

38、VS code必备前端插件

38、VS code必备前端插件

Code Spell Checker

源代码拼写检查器,提示代码中单词拼写错误

38、VS code必备前端插件

38、VS code必备前端插件

CSS Peek

允许查看css,并从HTML文件定位到css文件,文件定义跳转

38、VS code必备前端插件

38、VS code必备前端插件

DotENV

支持.env文件语法,高亮显示

38、VS code必备前端插件

38、VS code必备前端插件

Draw.io Integration

在VS code中绘制流程图,随时记录你的idea,不要太方便

38、VS code必备前端插件

38、VS code必备前端插件

ESLint

代码格式校验工具,配合项目中的校验规则,实现保存时格式化代码,开发必备,你值得拥有!

38、VS code必备前端插件

配置文件,在setting.json中添加,可以参考一下

"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
],
复制代码

Highlight Matching Tag

突出显示匹配的标签

38、VS code必备前端插件

38、VS code必备前端插件

Image Preview

当你引入时在左侧会显示图片的缩略图,方便预览

38、VS code必备前端插件

38、VS code必备前端插件

Import Cost

在编辑器中展示引用包的大小,让你更了解你引入的包

38、VS code必备前端插件

38、VS code必备前端插件

Javascript console utils

帮助你更快速的添加console和删除console,确实方便

  • 选择你的变量,⌘ + ⇧ + L,将会输出,如 console.log(' test ', test )
  • ⌘ + ⇧ + D,将删除当前文档中的所有 console.log 语句

38、VS code必备前端插件

koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件,经过多版迭代后,插件:支持所有主流语言,功能强大,灵活方便,文档齐全,食用简单!

  • ⌃ + ⌘ + i,可生成文件头部注释
<!--
 * @Author: your name
 * @Date: 2021-11-18 18:08:32
 * @LastEditTime: 2021-11-19 11:29:00
 * @LastEditors: your name
 * @Description: 
 * @FilePath: 
-->
复制代码
  • ⌃ + ⌘ + t,自动解析函数参数,生成函数参数注释
/**
 * @description: 
 * @param {*} 
 * @return {*}
 */
复制代码

38、VS code必备前端插件

38、VS code必备前端插件

npm Intellisense

代码插件,在导入语句中自动完成NPM模块

38、VS code必备前端插件

38、VS code必备前端插件

open in browser

允许你在默认浏览器或应用程序中打开当前文件。

  • ⌥ + B,打开默认浏览器

38、VS code必备前端插件

38、VS code必备前端插件

Path Intellisense

自动识别文件路径,引用更方便

38、VS code必备前端插件

38、VS code必备前端插件

Prettier

非常喜欢的一款代码格式化工具,在项目中也可以配置自己的规则

38、VS code必备前端插件

Svg Preview

方便svg文件预览

38、VS code必备前端插件

38、VS code必备前端插件

Todo Tree

快速搜索编辑器中添加的标签,如todo和fixme,并在资源管理器窗格中的树视图中显示。单击树中的todo将打开文件并将光标放在包含TODO的行上。

38、VS code必备前端插件

38、VS code必备前端插件

Trailing Spaces

突出显示尾随空格并快速删除它们!

38、VS code必备前端插件

38、VS code必备前端插件

还有一些插件

Power Mode

你的代码很强大,释放它!

38、VS code必备前端插件

38、VS code必备前端插件

38、VS code必备前端插件

......

大家有什么好用的插件,也可以推荐一下哈~

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值