vscode学习(一)之vscode开发中绝对让你惊艳的插件!!!

vscode学习(一)之vscode开发中绝对让你惊艳的插件!!!(个人在用) 持续更新。。。。

识别模版引擎

  • Apache Velocity :识别Velocity(vm)

  • Art Template Helper:识别artTemplate

点击路径跳转

  • Laravel goto view

在浏览器中查看

  • View In Browser

外观配置

  • 配色:Solarized Dark/Darcula Theme/Atom One Dark Theme

  • 图标:VSCode Great Icons/Material Icon Theme/vscode-icon,给不同类型的文件配置不同的图标,非常直观;

  • 字体:Fira Code,自从发现并开始使用 Fira Code,我就再也没多看自其它字体一眼,字体如果比较优雅,尤其是对数学运算符的处理,写代码时你真的会感觉在写诗,哈哈,Fira Code 的安装过程稍微复杂点,但是效果绝对是值当的;

配色、图标、字体以及其他外观配置项具体如下(注意,如果不安装上述插件,部分配置项如果直接使用是无效的):

{
  "editor.cursorStyle": "block",
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontSize": 16,
  "editor.lineHeight": 24,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": false,
  "editor.renderIndentGuides": false,
  "editor.rulers": [120],
  "workbench.colorTheme": "Solarized Dark",
  "workbench.iconTheme": "vscode-great-icons"
}

外观增强

  • Guides 缩进参考

与内置的缩进参考线不同,Guides 能够让你通过配置项来修改参考线的颜色、样式、缩进空白的背景色等,如果你愿意折腾,甚至能够配置出类似 Indent Rainbow 那样风格的参考线。下图是我使

用 Solarized Dark 主题时参考线的配置:

{
    "guides.normal.color.dark": "rgba(91, 91, 91, 0.6)",
    "guides.normal.color.light": "rgba(220, 220, 220, 0.7)",
    "guides.active.color.dark": "rgba(210, 110, 210, 0.6)",
    "guides.active.color.light": "rgba(200, 100, 100, 0.7)",
    "guides.active.style": "dashed",
    "guides.normal.style": "dashed",
    "guides.stack.style": "dashed",
}
  • TODO Highlight,维护时间稍长的代码仓库免不了会有各种 TODO、FIXME、HACK 之类的标记,TODO Highlight 能够帮我们把这些关键词高亮出来,在你翻阅代码时非常醒目,就像是在大声提醒你尽快把他解决掉。支持自定义配置需要高亮的关键词,实际使用比较坑的地方是,TODO、FIXME 之类的后面必须加上冒号,否则无法高亮。
  • Bracket Pair Colorizer给嵌套的各种括号加上不同的颜色。
  • JavaScript Atom Grammar:它用Atom编辑器里的JavaScript语法高亮替换VS Code原来的。

  • Babel JavaScript:支持ES201X、React、FlowType以及GraphQL的语法高亮。

  • DotENV:支持.env文件语法高亮,在你使用Node时会非常有用。

  • Highlight Matching Tag,高亮对应的 HTML 标签和标识出对应的各种括号的功能。

风格检查

  • ESLint:插件式架构,有多种主流的编码风格规则集可供选择,典型的有 AirbnbGoogle 等,你甚至可以攒个自己的,按下不表,它的规则在.eslintrc.json里配置;

  • StyleLint,同样插件式架构的样式检查工具,不过我在配置其检查 react-native 中 styled-components 组件样式时确实费了不小的功夫,可以单独写篇文章了;

  • TSLint:TypeScript 目前不是我的主要编程语言,但也早早的准备好了;

  • MarkdownLint:Markdown 如果不合法,可能在某些场合导致解析器异常,因为 Markdown 有好几套标准,在不同标准间部分语法支持可能是不兼容的;

除上面列的 Lint 工具之外,非常值得拥有的还有 EditorConfig 插件,几乎所有主流 IDE 都有支持,我们可以通过简单的配置文件在不同团队成员、不同 IDE、不同平台下约定好文件的缩进方式、编码格式,避免出现混乱,下面是我常用的配置:

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = true
indent_style = space
indent_size = 2

[{*.yml,*.json}]
indent_style = space
indent_size = 2复制代码

有了风格检查,自然就会产生按配置好的风格规则做文件格式化的需求,格式化的工具试用了好多,现在还在用的如下:

  • Prettier,实际上已经是代码格式化的工具标准,支持格式化几乎所有的前端代码,并且类似于 EditorConfig 支持用文件来配置格式规则;

  • Vetur,格式化 .vue 文件,包括里面的 CSS、JS,至于模板即 HTML 部分,官方维护者说没有比较好的工具支持,默认是不格式化的;

  • JSHint:基于JSHint的代码检测插件。在项目跟目录下使用.jshintrc文件作为其配置。

  • JavaScript Standard Style:零配置和严格规则的代码检测,强制使用StandardJS规则。

代码格式化插件

  • Beatufy:一个jsBeautifier的插件,支持JavaScript、JSON、CSS和HTML。可通过.jsbeautifyrc文件自定义。它是最流行的格式化工具,目前有230万的下载量。

  • Prettier Code Formatter:利用Prettier的支持JavaScript、TypeScript和CSS的插件,目前有超过150万的下载量。

  • JS Refactor:提供许多重构JavaScript代码的实用方法和操作,例如抽取变量和方法,把现有代码转为使用箭头函数和模板字符串的等价形式,导出函数等。

  • JavaScript Booster:一款了不起的代码重构工具。拥有需要代码操作,比如把var转为const或者let,去除多余的else语句,合并声明和初始化。其灵感大量源于WebStorm的启发。源码:vscode-javascript-booster。

       

代码片段

英文叫做 Snippets,市面上主流的编辑器也都支持,其基本思想就是把常见的代码模式抽出来,通过 2~3 个键就能展开 N 行代码,代码片段的积累一方面是根据个人习惯,另一方面是学习社区里

面积累出来的好的编码模式,如果觉得不适合你,可以改(找个现有的插件依葫芦画瓢),我常用的代码片段插件如下:

自动补全

  • Auto Close Tag,适用于 JSX、Vue、HTML,在打开标签并且键入 </ 的时候,能自动补全要闭合的标签;

  • Auto Rename Tag,适用于 JSX、Vue、HTML,在修改标签名时,能在你修改开始(结束)标签的时候修改对应的结束(开始)标签,帮你减少 50% 的击键;

  • Path Intellisense,文件路径补全,在你用任何方式引入文件系统中的路径时提供智能提示和自动完成;

  • NPM Intellisense,NPM 依赖补全,在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成;

  • IntelliSense for CSS class names/IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS,CSS 类名补全,会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示;

  • Emmet,以前叫做 Zen Coding,我发现后,也是爱不释手,可以把类 CSS 选择符的字符串展开成 HTML 标签,VSCode 已经内置,官方介绍文档参见,你需要做的就是熟悉他的语法,并勤加练习;

Node插件

  • Node.js Modules IntelliSense:提供JavaScript和TypeScript导入声明时的自动补全。源码:vscode-node-module-intellisense。 

       

  • View Node Package:利用此插件可快速查看Node包源码,让你直接在VS Code中打开Node包的代码库或文档。

  • Search node_modules:通常node_modules文件夹不在默认的搜索范围内,这个插件允许你搜索它。源码:vscode-search-node-modules。

       

  • Import Cost:显示导入的包的大小。源码:import-cost。 

       

功能增强

在效率提升方面除了上面的代码片段、自动补全之外,我还安装了下面几个插件,方便快速的浏览和理解代码,并且在不同项目之间切换。

  • Color Highlight/colorize,识别代码中的颜色,包括各种颜色格式;

  • Color Info,这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了

  • Bracket Pair Colorizer,识别代码中的各种括号,并且标记上不同的颜色,方便你扫视到匹配的括号,在括号使用非常多的情况下能环节眼部压力,编辑器快捷键固然好用,但是在临近嵌套多的情况下却有些力不从心;

  • fileheader,顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间

  • Project Manager,项目管理,让我们方便的在命令面板中切换项目文件夹,当然,你也可以直接打开包含多个项目的父级文件夹,但这样可能会让 VSCode 变慢;

  • Git Lens, 把 VSCode 结合 Git 的使用体验优化到了极致,能让我们在不离开编辑器,不执行任何命令的情况下知晓光标所在位置代码的修改时间、作者信息等。官方的介绍也是非常的牛叉;

  • Local History :个人感觉很有用 本地代码的一个保存日志,在没有git,svn,或者很长时间没有提交过代码的情况下,感觉挺实用,再也不怕代码回滚。

   

  • Git History

   

  功能:

  1. 查看和搜索历史

  2. 查看一个或所有分支的提交历史

  3. 查看一个文件的提交历史

  4. 查看一个文件一行代码的提交历史

  5. 查看一个作者的提交历史

  6. 比较分支

  7. 比较提交

  8. 跨提交比较分支

  使用:

  比较一个分支的当前提交和前一个提交

  比较一个分支的当前提交和master分支的最后一个提交

  • Code Outline, 能在单独窗口中列出当前源代码中大额各种符号,比如变量名、类名、方法名等,并支持快速跳转,有点类似于Vim里面大额ctags,翻看你老代码、开源项目代码时非常有用;

  • Document This, 能够一键给代码中的类、函数加上注释,支持函数声明、函数表达式、箭头函数等;

  • jQuery Code Snippets,jquery 重度患者必须品

  • TODO HightLight,这个插件能够在你的代码中标记出所有的 TODO 注释,以便更容易追踪任何未完成的业务。在默认的情况下,它会查找 TODO 和 FIXME 关键字。当然,你也可以添加自定义表达式。在vscode命令行中输入to do使用

  • Minify,这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置,以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和html-minifier,与 JavaScript、CSS 和HTML 协同工作。

  • SCSS IntelliSense Preview, SCSS智能提醒,配置强大

  • Version Lens,可以及时看到package.json内部版本的变动,很实用

  • Output Colorizer ,可以终端日志输出着色,实用

  • Enki Theme (Material Design Inspired),当前用的代码高亮,个人感觉很赞

  • SVG Viewer,此插件在 Visual Studio 代码中添加了许多实用的 SVG 程序,你无需离开编辑器,便可以打开 SVG 文件并查看它们。同时,它还包含了用于转换为 PNG 格式和生成数据 URI模式的选项

  • Embrace ,快速的在选中代码两边添加各种引号、括号,不用来回移动光标,不过还是没有 Vim 中的 Surrounding 插件强大;

  • CSS Peek,使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。

  • ECMAScript Quotes Transformer,方便在字符串和变量混搭模式(String Concat)的代码和字符串模板(Template Literals)模式间来回转换,省去手动的移动光标、修改引号等操作;

  • Code Spell Checker ,强烈推荐,对大部分非英语母语又不想写出四不像变量名的程序员来说,正确识记拼写各种单词还是有不小的挑战,比模棱两可时需要去查在线词典不同的是,这款插件能实时的识别单词拼写是否有误,并给出提示,不少 bug 都是因为拼写错误导致的。

  • Live Server,以前使用 Live Server 都是 n p mNode 包管理器 下载的,而且使用的时候需要在控制台手动敲启动代码。还好 VSCode 有了相应的插件,现在只需要鼠标点几下就行了。这个插件基本功能是预览网页,但它的特点是:会将网页在本地服务器上预览,最重要的是代码保存之后,浏览器自动刷新,有多方便不用我说了吧?

    使用方法:

    1、在 HTML 文件上右键

       

        2、打开 HTML 文件,点击编辑器右下角 Go Live 按钮

        

  • CSScomb,看名字应该可以联想到它的功能了吧?没错,正如其名,一把梳理 CSS 属性顺序的 “梳子”。CSS 属性书写顺序非常重要,一个合格的前端er 一定会有他遵循的 CSS 书写顺序规则。至于 CSS 属性书写顺序,这里我

     推荐腾讯 AollyTeam,团队的规范:http://alloyteam.github.io/CodeGuide/#css-declaration-order

          下面简单说下这个插件怎么用。按照插件的文档说明:

      

   在项目的根目录下创建一个名为:.csscomb.json / csscomb.json / .csscomb.js / csscomb.js 的文件,然后添加一些配置项。也可以将配置项写入项目的 package.json 文件中的 csscombConfig

      字段。至于添加的配置项,CSScomb提供了示例配置文件:https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json

      其中的 sort-order 就是 CSS 属性书写顺序,可以按照自己遵循的规范设置,所以我直接替换成了腾讯的。

      这个配置文件里面各个字段的作用可以戳这里查看:https://github.com/csscomb/csscomb.js/blob/master/doc/options.md

      放一个效果图:

      下面的 content 属性放在第一个是我的个人习惯,其他的顺序都和 AollyTeam 的规范保持一致。

 

 

  • carbon-now-sh,将代码分享为图片(图片的格式可以为 png 和 svg),最最最重要的是: 图片逼格敲高 ↓↓↓

      

  • CodeIf,CodeIf 是一个用来给变量命名的网站,你只要输入你想起的中文名,它就会给你提供很多建议的命名,可能很多人知道有 CodeIf 这么个网站,其实 VS Code 上有插件哦,是不是

     很神奇 : 

      

  • Turbo Console Log,快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log。

简单说下这个插件要用到的快捷键: 

ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log 

alt + shift + c 注释所有 console.log

alt + shift + u 启用所有 console.log 

alt + shift + d 删除所有 console.log

  • LeetCode,看到这个名字是不是很熟悉???没错,它就是有名的刷题网站 LeetCode 啦。今天我是才知道 VS Code 中有插件,果断入手 (๑•̀ㅂ•́)و✧使用很简单输入用户名和密码就行了,看图:

      

     是不是想着自己刷完 LeetCode,拿到大厂 offer 的样子已经激动地搓手手了呢 ?那就赶紧入手吧!

  • Regex Previewer,实时预览正则表达式的效果。

      

  • css-auto-prefix,自动添加 CSS 私有前缀。

      

  • change-case,转换命名风格。

      

  • vscode-json处理 JSON 文件,用法看图:

      

  • HTML Boilerplate,虽然 VSCode 已经内置了一键生成 HTML 模板的快捷方式,但这个有另外的用处,看图:

      

  • Settings Sync,在不同电脑间同步你的插件。安装了这么多插件,换了台电脑又得重新安装,所以,这个插件不考虑入手吗?

       

    这里简述下这个插件怎么用:首先要想在不同的设备间同步你的插件, 需要用到 Token 和Gist id

    Token 就是你把插件上传到 github 上时, 让你保存的那段字符,Gist id 在你上传插件的那台电脑上保存着。

    ps: 如果你没有保存Token,也不知道Gist id,不要慌, 可以这样获取:

    在你上传 Sync 设置的 VSCode 里,按 F1, 然后输入 Sync,选择 Sync: 高级选项:

      

  然后选择:

     

    这样就会进入一个压缩的文件,然后鼠标右键整理一下文档格式如下:

    

    这样就能看见你的 Token 了。

    接下来就是获取你的 Gist id:

    在 VSCode 里,依次打开: 文件 -> 首选项 -> 设置,然后输入 Sync 进行搜索:

   

   这样就获取到你的 Gist id

   知道了 Token 和 Gist id,就能在不同设备间同步你的 VSCode 插件。

   (当然,你也可以把 Token 和 Gist id 分享给别人,这样别人就能一键下载你用的 VSCode 插件!)

   彩蛋2:
   我的 Token 和 Gist id 分别是:
   Token:
   4f5135c3c9e7275950f58133bc4b5f75461ceef3
   Gist id:
   ce3ff9d53df48d738f1e9e86fff55a8c

   里面有我用的所有 VSCode 插件 : )

  • ES7 React/Redux/GraphQL/React-Native snippets,React/Redux/GraphQL/React-Native 代码快捷生成。

       

  • px to rem,像素转 rem。
  • Minify,压缩 HTML、CSS、JS 代码。

       

转自https://www.cnblogs.com/kunmomo/p/10133944.html

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值