前端工程师vscode必备插件(20个)

前端工程师vscode必备插件(20个)阶段:前端新手只会html、css、js1.Chinese汉化vscode2.TokyoNightMaterialTheme已经下架了,这个是目前来说个人认为vscode中最好看的主题。3.vscode-icons文件的图标,这个是看着最顺眼的图标。4.prettier代码格式化工具,代码自动格式化。(需配置,最下面放上代码)如果安装了vetur,则会产生冲突,需要手动右键格式化,选择prettier。5.openinbrowser打开浏览器插件。

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

按需安装。考虑到有些插件对于一些新手来说暂时用不上,因此我将分为 前端新手→前端程序员→前端工程师 三个阶段来推荐需要安装的插件。

阶段一:前端新手

只会html、css、js

1.Chinese

汉化vscode的插件。

2.Tokyo Night

Material Theme主题已经下架了,所以Tokyo Night是目前来说vs code中我认为最好看的主题。

前端工程师vscode必备插件(20个)

3.vscode-icons

更改文件的图标。这个是我觉得最顺眼的图标。

前端工程师vscode必备插件(20个)

4.Auto Rename Tag

标签同步更改。修改一个标签,另一半也自动同步更改。

5.Prettier – Code formatter

代码格式化工具,代码自动格式化。在setting中配置保存时自动格式化代码:

    “editor.formatOnType”:true,
    “editor.formatOnSave”: true

如果安装了vetur,则会产生冲突,需要手动右键格式化,选择prettier。

但是在创建vue项目时,prettier会因为eslint而失效,需要再单独设置.prettierrc文件,写入以下代码

{
    "printWidth": 800,
    "singleQuote": true,
    "semi": false,
    "trailingComma": "none"
}

6.open in browser

写html文件的时候,能够在vscode打开浏览器。

7.Live Server

实时监控html文件更改并自动刷新页面。

 

阶段二:前端程序员

掌握了一些前端技术,会做一些复杂的demo

8.Bracket Pair Colorizer

由于写的代码越来越复杂,代码的层级分不清。Bracket Pair Colorizer能够显示不同括号的颜色,易于区分代码块。

前端工程师vscode必备插件(20个)

9.Guides

显示红线,提示代码所在的层级。

前端工程师vscode必备插件(20个)

9. px to rem

px自动转成rem

10.Easy LESS

自动将less文件生成css

11.Image preview

用来检查图片是否正确引入。

引入图片后,旁边可以看到图片的预览图。鼠标悬停,点击后可打开该图片所在的文件夹。

前端工程师vscode必备插件(20个)

前端工程师vscode必备插件(20个)

12.CSS Peek

光标定位在class的位置,按F12即可快速定位到改class在css文件中的位置。

13.HTML CSS Support

输入class名称的开头,即可显示所有带有该名称的class。

 

阶段:前端工程师

学会了一些框架,比如vue.js,并且能够上手一些完整的小项目

14.Vetur

在 .vue文件中代码高亮。

但是装了,有时候会提示vetur can’t find tspackage.json

请参考这篇文章:

https://blog.csdn.net/qq_40079749/article/details/111540700

15.Import Cost

显示引入包文件的大小

前端工程师vscode必备插件(20个)

16.Trailing Spaces

显示多余的空格。在用vue-cli搭建项目的时候,因为eslint,多余空格会报错。这样就能快速区分空格。

前端工程师vscode必备插件(20个)

17. GitLens

在多人开发中,能够显示这段代码是谁提交写的。

前端工程师vscode必备插件(20个)

18.background

前端工程师vscode必备插件(20个)

注意作者。

这个插件可以自定义vscode的背景图片。让人更舒服发开发。但是目前该插件还有些问题,首先是图片需要放到C盘的.vscode文件下面,然后是要配置插件的样式,使其全屏。

前端工程师vscode必备插件(20个)

19.Fix VSCode Checksums

如果用background插件,会经常显示出code安装似乎损坏,那是所以要修复一下。

å¨è¿éæå¥å¾çæè¿°

具体配置要看这个博客:https://blog.csdn.net/liuarmyliu/article/details/107370535

20.Power Mode

能够在打代码时产生特效,不过光标会左右震动,需要配置。

前端工程师vscode必备插件(20个)

setting.json中的配置

{
  "editor.fontSize": 16,
  "workbench.sideBar.location": "right",
  "editor.formatOnType": true,
  "editor.formatOnSave": true,
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "files.associations": {
    "*.vue": "html"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.iconTheme": "vscode-icons",
  "editor.renderIndentGuides": false,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //  #去掉代码结尾的分号
  "prettier.semi": false,
  //  #使用带引号替代双引号
  "prettier.singleQuote": true,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "powermode.enabled": true,
  "powermode.shakeIntensity": 0,
  "workbench.colorTheme": "Tokyo Night Storm",
  "files.associations": {
    "*.html": "html"
  },
  "background.customImages": ["C:/Users/15638/.vscode/extensions/58.png"],
  "background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "z-index": "99999",
    "width": "100%",
    "height": "100%",
    "background-position": "40% 0%",
    "background-size": "cover",
    "background-repeat": "no-repeat",
    "opacity": 0.1
  },
  "background.useDefault": false,
  "explorer.confirmDelete": false,
  "workbench.editor.enablePreview": false,
  "explorer.confirmDragAndDrop": false,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164345.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 前缀、中缀、后缀表达式[通俗易懂]

    前缀、中缀、后缀表达式[通俗易懂]关键字:概念,前缀表达式,前缀记法,中缀表达式,中缀记法,波兰式,后缀表达式,后缀记法,逆波兰式它们都是对表达式的记法,因此也被称为前缀记法、中缀记法和后缀记法。它们之间的区别在于运算符相对与操作数的位置不同:前缀表达式的运算符位于与其相关的操作数之前

  • Excel和CSV格式文件的不同之处

    Excel和CSV格式文件的不同之处Excel和CSV格式文件的不同之处来源:https://www.guru99.com/excel-vs-csv.htmlExcelCSV这是一个二进制文件,它保存有关工作簿中所有工作表的信息CSV代表CommaSeparatedValues。这是一个纯文本格式,用逗号分隔一系列值

  • git 拉取远程代码(小白教程)

    git拉取远程代码在实际项目开发过程中,往往是已经存在远程项目了,我们定义的需求是只需要简单的操作git,能够上传和下拉最新代码。模拟小白需求:第一步:拉取远程代码gitclonehttps://github.com/…/PrettyGirls.git第二步:查看本地分支和远程分支1、cdPrettyGirls到工程目录下;2、gitbranch-al查看本地和远程的所

  • idea 2022 3.2激活码[最新免费获取]「建议收藏」

    (idea 2022 3.2激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html1M2OME2TZY-eyJsaWN…

  • 如何用串口助手测试软件485通讯功能,串口调试助手如何检测RS485端口好坏及信号发送的好坏?…

    如何用串口助手测试软件485通讯功能,串口调试助手如何检测RS485端口好坏及信号发送的好坏?…串口是用来通信的,如果能正常通信,串口当然就是好的!所以,最可靠的方法就是建立一个串口通信环境。当然,也有简单的方法,那就是短接串口的2、3两针,这样就形成一个自发自收的环境,再用串口调试助手发送数据,如果有数据回显,大致说明串口通信功能正常!当然,标准串口信号很多,最可靠的方法还是建立一个串口通信环境。拓展:1、串口调试助手是串口调试相关工具,有多个版本。如:友善串口调试助手,支持960…

  • java h2 数据库_H2数据库介绍「建议收藏」

    java h2 数据库_H2数据库介绍「建议收藏」一、H2数据库简介1、H2数据库是一个开源的关系型数据库。H2是一个嵌入式数据库引擎,采用java语言编写,不受平台的限制,同时支持网络版和嵌入式版本,有比较好的兼容性,支持相当标准的sql标准,支持集群2、提供JDBC、ODBC访问接口,提供了非常友好的基于web的数据库管理界面二、在Java中操作H2数据库1、以嵌入式(本地)连接方式连接H2数据库这种连接方式默认情况下只允许有一个客户端连接到…

    2022年10月12日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号