精华内容
下载资源
问答
  • 2022-01-17 19:53:02

    在这里插入图片描述
    VScode应该是很多学习前端的小伙伴很熟悉的开发工具了
    与其他前端编译器比起来,VsCode最大的特点就是美观,可以说是WebStorm,HBuilder遥不可及的!
    下面就来看看 vscode小白如何快速上手这款好用的编译器吧

    常用且实用的插件:

    Auto Close Tag (自动闭合HTML/XML标签)

    Auto Rename Tag (自动完成另一侧标签的同步修改)

    Beautify (格式化 html ,js,css)

    Bracket Pair Colorizer(给括号加上不同的颜色,便于区分不同的区块)

    Debugger for Chrome(映射vscode上的断点到chrome上,方便调试)

    ESLint(js语法纠错,可以自定义配置)

    GitLens(方便查看git日志)

    HTML CSS Support (智能提示CSS类名以及id)

    HTML Snippets(智能提示HTML标签,以及标签含义)

    JavaScript(ES6) code snippets(ES6语法智能提示,以及快速输入)

    jQuery Code Snippets(jQuery代码智能提示)

    Markdown Preview Enhanced(实时预览markdown)

    markdownlint(markdown语法纠错)

    Material Icon Theme(vscode图标主题)

    Icon fonts(图标字体)

    open in browser(右键快速在浏览器中打开html文件)

    Path Intellisense(自动提示文件路径)

    React/Redux/react-router Snippets(React/Redux/react-router语法智能提示)

    Vetur(Vue多功能集成插件,错误提示等)

    Class autocomplete for HTML(智能提示HTML class =“”属性)

    npm Intellisense(require 时的包提示)

    更多相关内容
  • 前言:vscode是一款强大的前端编辑软件,有些人说ws(webstorm)更好用,但是vs重在轻量级啊!!!而且根据自己的开发习惯安装适合自己的插件后,用起来简直不要太舒服了好嘛!!! 首先呢,我先推荐的就是最基础...

    前言:vscode是一款强大的前端编辑软件,有些人说ws(webstorm)更好用,但是vs重在轻量级啊!!!而且根据自己的开发习惯安装适合自己的插件后,用起来简直不要太舒服了好嘛!!!

    首先呢,我先推荐的就是最基础的语言包,没办法,英语水平太捞了哈哈哈,弄起来后就舒服多了,汉语yyds~
    1、《Chinese (Simplified) (简体中文) Language》

    注释工具
    2、《Colorful Comments》

    不同的注释符能带来很多高亮的显示

    快速找到css定义位置并小窗口展示
    3、《CSS Peek》


    规范提示工具
    4、《ESLint》
    这个其实真的是又爱又恨,有时候一些写法自己觉得很舒服,他就给你提示不规范,看个人开发习惯吧哈哈哈

    查看git的分支管理、提交记录等
    5、《Git History》

    可以查看提交历史,切换分支,查看提交记录等

    6、《Vetur》
    这个vue开发者必备的扩展就不多做解释了,代码高亮,补齐等等

    7、《view-in-browser》
    在.html文件
    使用的话右键就可以看到view-in-browser   以网站页面的形式打开此文件

    然后要介绍的就是以服务器形式启动的前端项目
    8、《Live Server》
    跟上面那个一样 右键就能看见

    git团队项目管理工具
    9、《GitLens — Git supercharged》

    这个工具可以清楚的看见哪些bug是谁写的,还有很多功能,也是团队开发中必安的插件

    美化图标工具包
    10、《vscode-icons》
    顾名思义,可以让文件的图标更好看

    11、《JavaScript (ES6) code snippets》
    js(es6)的代码片段提示、补全,提高开发效率

    就先介绍这几款常用的插件,后续有的话还会再添加,也欢迎各位朋友补充推荐哈

    原创码字不易,如果你觉得对你有帮助的好劳烦你动动你的小手点个赞,当然关注收藏三连就更好了!!!^_^!

    展开全文
  • 前端工程师vscode必备插件(20个)

    千次阅读 2021-03-12 20:41:41
    阶段:前端新手 只会html、css、js 1.Chinese 汉化vscode 2.Tokyo Night Material Theme已经下架了,这个是目前来说个人认为vs code中最好看的主题。 3.vscode-icons 文件的图标,这个是看着最顺眼的图标。 ...

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

    阶段一:前端新手

    只会html、css、js

    1.Chinese

    汉化vscode的插件。

    2.Tokyo Night

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

    3.vscode-icons

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

    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能够显示不同括号的颜色,易于区分代码块。

    9.Guides

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

    9. px to rem

    px自动转成rem

    10.Easy LESS

    自动将less文件生成css

    11.Image preview

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

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

    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

    显示引入包文件的大小

    16.Trailing Spaces

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

    17. GitLens

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

    18.background

    注意作者。

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

    19.Fix VSCode Checksums

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

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

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

    20.Power Mode

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

    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"
      },
    }
    

     

    展开全文
  • 前端VSCode常用插件

    2021-08-04 12:41:51
    前端VSCode常用插件 1.Chinese (Simplified) vscode下载完毕是英文版的,先安装这个插件,改为中文版,所以是我们第一个安装的插件。 2.Auto Rename Tag 修改开始标签,结束标签跟着自动变化,比较好用。 3...

    前端VSCode常用插件

    1.Chinese (Simplified)  

    vscode下载完毕是英文版的,先安装这个插件,改为中文版,所以是我们第一个安装的插件。

    2.Auto Rename Tag 

    修改开始标签,结束标签跟着自动变化,比较好用。

    3.One Dark Pro   颜色主题 

    4.格式化代码(vscode系统自带) 

    但是html标签嵌套比较多,可能需要自动格式化比较好,所以我们可以利用vscode自动的功能格式化代码,暂且不用格式化插件,自动保存照样能格式化代码。

    (1) 点击管理按钮---选择里面的设置命令

    vscode 管理--设置
    (2)选择用户 --->  文本编辑器  --->  正在格式化  --->  勾选如下图的2个按钮

    vscode自动格式化代码
    这样,我们不用安装插件,就可以自动保存自动格式化代码了。

    4.open in browser   浏览器预览页面 

    编写完代码,需要浏览器预览,可以安装这个插件

    5. vscode-icons   设置文件图标主题 

    可以很清楚看到文件对用的图标。

    7. Easy LESS   编译less文件

    我们写的less不能直接引入到html文件中, 通过这个插件可以自动帮我们生成 css文件

    8.小程序助手

     帮助将应用程序项目转换为其他类型

    9.Auto Close Tag

    自动添加 HTML/XML 关闭标签,与 Visual Studio IDE 或 Sublime Text 相同 

    10.Auto Complete Tag

     扩展包为 HTML/XML 添加关闭标签并自动重命名配对标签

    11.Beautify

    为 VS Code 美化代码

    12.CSS Tree

    从选定的 HTML/JSX 生成 CSS 树

    13.EditorConfig for VS Code

    Visual Studio Code 的 EditorConfig 支持

    14.ESLint

    将 ESLint JavaScript 集成到 VS Code 中。

    15.Git Blame

     在状态栏中查看 git blame 信息。

    16.Git History

    查看 git 日志、文件历史、比较分支或提交

    17.GitLens — Git supercharged

    增强 Visual Studio Code 中制造的 Git 功能

    18.HTML CSS Support

    用于 HTML 的 CSS 智能感知

    19.JavaScript (ES6) code snippets

    ES6 语法中的 JavaScript 代码片段

    20.language-stylus

    Stylus language支持

    21.Live Share

    使用您最喜欢的工具进行实时协作开发。

    22.Path Intellisense

    自动补全文件名的 Visual Studio Code 插件

    23.Prettier - Code formatter

     

    使用更漂亮的代码格式化程序

    24.Preview

    Markdown、重构文本、HTML、Jade、Pug、图像、CSS预览器。

    25.px to rem

    将 px 转换为 rem,反之亦然

    26.Sass

    缩进的 Sass 语法高亮、自动完成和格式化

    27.uniapp-snippet

    uniapp片段提示

    28.Vetur

    用于 VS Code 的 Vue 工具

    29.Visual Studio IntelliCode

    人工智能辅助开发

    30.vscode wxml

    vscode的微信wxml支持/片段

    展开全文
  • 在这里,我会给你推荐很多实用的插件,让你对 vscode 有更深刻的体会,渐渐地你就会知道它有多好用。走马观花前,请先将你的 vscode 更新到最新版本。通用插件HTML Snippets超级实用且初级的 H5代码片段以及提示...
  • vscode 前端常用必备插件汇总。

    万次阅读 多人点赞 2019-01-14 21:10:20
    持续更新,欢迎推荐好的插件。 1. vscode基础智能能提示类插件 2. vscode美化优化类插件 3. vscode各大框架辅助插件 4. markdown工具类插件
  • 1、Mac必备开发辅助工具: alfred https://www.alfredapp.com/ charles https://www.charlesproxy.com/ postman https://www.postman.com/ mobile debugger https://www.mobiledebug.com/ 2、shell客户端iterm2 3...
  • vscode
  • vscode 常用插件 手动放到 .vscode/extensions/ 下, 包含插件如下: Angular2V0.4.1.vsix auto-close-tagV0.5.6.vsix auto-rename-tagV0.0.15.vsix autoimportV1.5.3.vsix beautifyV1.3.0.vsix bracket-pair-...
  • web大前端必备VSCode插件,常用的(15个)

    万次阅读 多人点赞 2019-11-20 15:42:50
    就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件。为了帮助大家挑选出值得下载的插件,我们针对性的收集了一些实用、有趣的插件与大家分享。 1.Open-In-Browser 由于 VSCode ...
  • vscode 前端常用必备插件汇总

    千次阅读 2021-08-03 11:51:33
    8.Power Mode 酷炫的输入动效 9.Document This js代码规范注释 10.Code Spell Checker 英语拼写检测,对于js命名很有用哦 11.vscode-fileheader 作者个人信息注释,自动保存最后代码书写时间 12. ESLint js...
  • 一、VsCode 前端常用插件推荐 vscode既拥有高自由度、又拥有高性能和高颜值,最关键的是,vscode还是一款免费并且有团队持续快速更新的代码编辑器。所以vscode是代码编辑器的首选,个人推荐编写前端代码时,代码...
  • vscode 前端常用插件推荐

    万次阅读 多人点赞 2019-01-07 00:09:49
    1. vscode 简介 vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。 当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。 比...
  • 2021 VSCode前端插件推荐

    千次阅读 2021-10-02 10:57:17
    推荐一波前端开发必备插件,绝对可以提高你的生产力,剩下来的时间来 mo鱼,岂不美哉 开发综合推荐 别名路径跳转 插件名: 别名路径跳转 使用说明: 别名路径跳转插件,支持任何项目, 使用场景: 当你在开发页面时,...
  • vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来 打断点调试 根目录下建立文件.vscode/launch.json { "version": "0.2.0", "configurations": [{ "type": "chrome", "request": "laun...
  • VSCode必备插件汇总

    千次阅读 2020-09-29 16:39:21
    Hbuilder、webStorm、...下面汇总了一些前端开发比较常用的插件。 1.Beautify(格式化代码,值得注意的是,beautify 插件支持自定义格式化代码规则) 2.Auto Close Tag(自动闭合 HTML/XML 标签) 3.Auto Rename Ta
  • VSCode 前端常用插件集合

    千次阅读 2022-04-05 20:09:58
    Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能,它很快就受到了...但工欲善其事必先利其器,以下是本人为前端开发收集的常用的vscode插件,有需要的话赶紧mark起来吧~
  • web 前端使用 vscode 插件

    千次阅读 2022-03-13 23:38:53
    vscode-icons:设置文件图标主题 Terminal:编辑器中内嵌一个似 cmd 终端程序 Live Server:为静态和动态页面启动带有实时重新加载功能的开发本地服务器 Path Intellisense: 自动完成文件名的Visual Studio代码...
  • 前端人必备干货、好用的插件、必备插件,Git插件,Svn上传插件,代码一键提交
  • vscode中文插件儿 Easy LESS 项目无框架无webpack时可以使用的一个less转换插件 settings.json配置 "less.compile": { "out": false, //是否输出css文件,false为不输出 "compress": false, //是否压缩 "sour...
  • VSCode前端必备插件

    千次阅读 2020-04-26 11:46:39
    就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件。为了帮助大家挑选出值得下载的插件,我们针对性的收集了一些实用、有趣的插件与大家分享。 1.Open-In-Browser 由于 VSCode ...
  • VsCode必备插件

    2022-04-18 14:50:32
    Vscode 必备插件
  • vscode 前端插件整理

    2021-06-19 03:16:51
    常用插件Auto Close Tag自动添加HTML / XML关闭标签(必备)imageAuto Rename Tag自动重命名配对的HTML / XML标签(必备)imageBeautify格式化javascript,JSON,CSS,Sass,和HTMLBootstrap 4 & Font awesome ...
  • Visual Studio Code 是由微软开发的一款免费、跨...就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件。为了帮助大家挑选出值得下载的插件,我们针对性的收集了一些实用、有趣的...
  • vscode开发使用总结
  • 精选、前端开发必备的N个vscode插件
  • 前言推荐一波前端开发必备插件,绝对可以提高你的生产力,剩下来的时间来 mo鱼,岂不美哉开发综合推荐别名路径跳转插件名:别名路径跳转使用说明: 别名路径跳转插件,支持任何项目,使用场景: 当你在开发页面时, 想...
  • 前端插件 1. auto close tag 2. auto rename tag 3. bracket pair colorrizer 4. dracula official 5. highlight matching tag 6. html css support 7. html snippets 8. intellisense for css class names in html ...
  • Bracket Pair Colorizer友好的给括号加上不同的颜色,便于区分不同的区块,使用者还可以定义括号...Path Intellisense插件自动提示文件路径,支持各种文件无脑快速引入,非常方便。JavaScript(ES6) code snippetsES6...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,863
精华内容 745
关键字:

前端vscode必备插件