zoukankan      html  css  js  c++  java
  • vscode 插件

    vscode是一款开源且优秀的编辑器,接下来让我吐血推荐一下我工作使用过的令人惊叹的Visual Studio Code插件。

    代码编辑插件

    vscode-color-highlight ------ 颜色代码高亮插件。(sublime text也有)

    vscode-Path Intellisense ----- 文件路径提示。(sublime text也有)

    vscode-copy-relative-path ------ 复制文件相对路径。(辅助书写路径的工具)

    vscode-Change Case ----- 变量名命名风格切换。(解决了命名风格不统一的工具)

    vscode-removeEmptyLines ----- 能够迅速删除多行空白。(自动删除所有代码空行)

    vscode-Trailing Spaces ----- 检测并一键去除代码中多余的空格。

    vscode-ECMAScript Quotes Transformer ------ js中html转义。(终于找到这个插件了,一直苦于手动去转义js中的html)

    vscode-Bracket Pair Colorizer ----- 自动标识相匹配括号的颜色。(增强了vscode的括号提示)

    vscode-Prettier formatter ------ vscode代码格式增强工具。(标准格式化工具)

    PS:格式化工具请认准Prettier formatter。

    vscode-change-case ------ 各种命名之间格式转化工具。(不再担心命名格式不统一的问题)

    PS:1.选中需要转换的变量。比如:let ABC_a = 0。(字符之间需要加一个任意符号才可以实现命名格式转化。)

             2.执行vscode命令 Change Case Commands  命令。

             3.选择转化格式。

            

    web前端插件

    vscode-Debugger for Chrome ------ 在vscode与Chrome联调。

    vscode-Browser Preview ------ 在vscode进行浏览器预览。(类似与eclipse IDE里面浏览页面)

    PS:vscode-Debugger for Chrome 与 vscode-Browser Preview插件仍然处于实验阶段,不够稳定,建议直接使用Chrome调试较好。

    vscode-ESLint ------ js代码检查工具。(标准化ESLint的插件,规范js代码)

    PS: 1.运行node环境命令。

     

             2.配置vscode设置文件。 (更多选项请参考ESLint官网)

    复制代码
    
    
    复制代码

    vscode-stylelint------css代码检查工具。(标准化stylelint的插件,规范style代码)

    补充: ESLint + Prettier formatter (javascript整合格式化)

                1.运行node环境命令。

     

                2.配置vcode设置文件。(ESLint配置要与prettier配置相同)

     

               stylelint+Prettier formatter (css整合格式化)

               1.运行node环境命令。

     

               2.配置vcode设置文件。(stylelint配置要与prettier配置相同)

    复制代码
    
    
    复制代码

             3.创建一个.stylelintrc文件。(更多选项参考stylelint官网)

     

             4.使用shell命令测试一下stylelint是否能够正常使用fix功能。

     

             5.如果stylelint正常工作,prettier-stylelint就可以使用fix功能。

    vscode-Document This-----jsdoc注释生成。

    vscode-Placeholder Images------插入占位图。(多个占位图站点都有)

    vscode-Auto Rename Tag------修改html标签的时候会自动匹配修改。

    vscode-tag-wrapper-----选中区域添加包裹标签。

    PS:与Auto Rename Tag插件一起使用简直就是perfect。

    vscode-Sass------sass/scss文件语法提示。(sublime text也有)

    vscode-Easy Sass------scss编译成css,min.css。(不错的一个sass编译工具)

    vscode-Sorting HTML and Jade attributes------html属性排序(代码洁癖症者使用)

    vscode-Turbo Console Log----快速生成控制台输出语句,支持批量添加,删除,注释打印语句。(以前我还一直手写console.log语句,又删又写又注释,这个插件简直就是调试输出的福音)

    vscode-csscomb------css属性排序。(代码洁癖症者使用)

    PS:1.运行node环境命令。

     

            2.配置vcode设置文件。

     

              设置排序模式,有"csscomb", "yandex", "zen"三种。

     

              设置优化配置项目排序模式。(更多选项参考CSSComb官网)

           3.选中css/less/scss文件,执行vscode命令 CSSComb:Format styles 命令。

    vscode-CSS Peek ------ lass类定义跳转。(终于拥有dw cc的这个css定义跳转功能)

    vscode-eCSStractor ------ 抽取页面的class,生成一个css文档。

    vscode-Image Sprites ----- 生成精灵图片。

    vscode-Quokka ------ js实时编译。(相当于边写边输出控制台信息)

    vscode-IntelliSense for CSS class names ----- 在工作区自动扫描css文件类名,自动提示class类名。(相当于一些css框架的class提示)

    vscode-jQuery Code Snippets ------ jQuery的语法高亮,语法提示。

    vscode-npm ------ npm与package.json的语法高亮,语法提示。

    vscode-npm Intellisense ------ npm包路径提示。

    vscode-Auto Import ------ 自动导入模块。

    vscode-Vue.js Extension Pack ------ vuejs集成扩展包,依赖其他插件。

    vscode-vue peek ------ 查找vue单文件定义处。

    PS:关于vue单文件的格式化。(非使用cli工具)

           1.配置vscode编辑器的格式化。

           

          2.使用vscode-wpy-beauitfy插件进行格式化。(不要使用编辑器默认的格式化)

    vscode-Reactjs code snippets------Reactjs的语法高亮,语法提示。

    vscode-React Extension Pack------Reactjs集成扩展包,依赖其他插件。

    vscode-styled-components ------styled-components高亮,语法提示。

    vscode-TSLint------Typescript的语法高亮,语法提示。

    vscode-Pug (Jade) snippets------pug模版语法提示。

    数据库插件

    vscode-MySQL ------ mysql数据库管理工具。

    vscode-Azure Cosmos DB ----- MongoDB、Graph (Gremlin) 、Cosmos DB数据库管理工具。

    PS:这个插件比较适合使用mongodb数据库。执行sql语句会自动格式化返回的结果,无需使用pretty()方法。

           使用MongoDB 一些不常见Shell命令,需要配置vscode设置文件。

     

    代码质量插件

    vscode-Jest------jest语法提示,测试用例感应测试。

    vscode-CodeMetrics------检测代码圈复杂度。(此插件支持ts/js/lua语法,检测代码中的代码圈复杂度)

    PS:圈复杂度是一种代码复杂度的衡量标准。

            1.设置vscode配置文件。

    复制代码
    
    
    复制代码

            更多配置,请看vscode设置选项。

            使用效果如下:

            

            点击可追踪具体代码结构。

            

    远程访问插件

    vscode-SSH FS------通过SSH协议登录服务器,可以操作服务器文件。

    PS:配置vscode设置文件。(如果需要使用Terminal的话,请使用第三方SSH客户端SmarTTY或mobaXterm。)

    复制代码
    
    
    复制代码

            SSH连接服务。

            

            SSH连接成功之后,就可以操作文件了。

            

    补充:如果需要使用Terminal的话,请使用第三方SSH客户端(SmarTTY或mobaXterm)。

    Java插件

    vscode-Java Extension Pack------Java集成扩展包,依赖其他插件。(必须先安装JDK,配置JDK系统环境)

    PS: Language Support for Java(TM) by Red Hat ------ 利用Eclipse开源JDT等组件实现vscode java开发环境,主要是用于java项目创建,编译工作,语法提示等功能。(适用于java SE、java SE、java EE)

             Debugger for Java------轻量级java断点调试插件,主要是用于java程序断点调试,配合vscode的调试功能。(适用于java SE、java EE)

             java SE  “mainClass” 设置

             

             Java EE “mainClass” 设置(Maven项目)

             

             Java Test Runner------轻量级java测试用例插件,主要是用于java单元测试。(适用于java SE、java EE)

             Maven for Java------针对java项目的Maven构建器,主要是用于Maven构建器的语法提示与构建命令,此插件需要依赖Apache-Maven,请移步到Apache-Maven官网下载。(适用于

    java EE)

             Java开发配置选项

             

    补充:轻量级单一Java项目可以使用VScode的Java插件进行开发,微服务Java项目建议使用IntelliJ IDEA进行开发。

    其他插件

    vscode-Comment Translate ----- vscode的Google翻译(简单又方便的文件内容翻译插件)

    vscode-ASCIIDecorator ------ ASCII字符生成。(代码注释逼格工具)

    vscode-Banner Comments + ------ 另一款ASCII字符生成。(代码注释逼格工具)

    vscode-fileheader ------ 快速生成文件头注释,保存文件自动添加修改时间。(容易跟踪文件修改记录)

    vscode-REST Client ----- 轻量级http请求测试。(Api接口测试,类似于postman)

    vscode-fake ----- 生成各种假数据类型。

    vscode-SVG Viewer ------ svg预览。

    vscode-Image preview ------ 图片预览。(支持html、css中图片资源预览)

    vscode-RegExp Preview and Editor ------ 正则表达式编写与预览。(灵活校验正则表达式)

    vscode-Live Server ----- http服务器(相当于使用nodejs的http-server )

    vscode-Git Lens-----增强vscode的git管理工具。

               

    使用建议

    按需安装Visual Studio Code插件,建议控制安装数量在三十个插件以内,否则会影响Visual Studio Code使用性能。

  • 相关阅读:
    ZOJ 3765 Lights (zju March I)伸展树Splay
    UVA 11922 伸展树Splay 第一题
    UVALive 4794 Sharing Chocolate DP
    ZOJ 3757 Alice and Bod 模拟
    UVALive 3983 捡垃圾的机器人 DP
    UVA 10891 SUM游戏 DP
    poj 1328 Radar Installatio【贪心】
    poj 3264 Balanced Lineup【RMQ-ST查询区间最大最小值之差 +模板应用】
    【转】RMQ-ST算法详解
    poj 3083 Children of the Candy Corn 【条件约束dfs搜索 + bfs搜索】【复习搜索题目一定要看这道题目】
  • 原文地址:https://www.cnblogs.com/liea/p/11370657.html
Copyright © 2011-2022 走看看