前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VScode编辑器神插件!让你入门前端轻松打怪升级!

VScode编辑器神插件!让你入门前端轻松打怪升级!

作者头像
腾讯NEXT学位
发布2018-05-14 17:06:17
1.9K0
发布2018-05-14 17:06:17
举报
文章被收录于专栏:腾讯NEXT学位

工欲善其事必先利其器,软件工程师每天打交道最多的可能就是编辑器了。入行几年来,先后折腾过的编辑器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode。

每每上手新的编辑器,我都会根据自己的开发习惯把它调较到理想状态,加上熟悉编辑器各种特性,这个过程通常需要几周的时间。接下来,我就从外观配置、风格检查、编码效率、功能增强等 4 方面来侃侃怎么配置 VSCode 来提高工作幸福感。

外观配置

外观是最先考虑的部分,从配置的角度,无非是配色、图标、字体等,俗话说萝卜白菜各有所爱,我目前的配色、图标、字体从下图基本都能看出来,供大家参考:

  • 配色:Solarized Dark,VSCode 已经内置,使用了至少 5 年以上的主题,Vim 下的配置完全相同;
  • 图标:VSCode Great Icons,给不同类型的文件配置不同的图标,非常直观;
  • 字体:Fira Code,自从发现并开始使用 Fira Code,我就再也没多看自其它字体一眼,字体如果比较优雅,尤其是对数学运算符的处理,写代码时你真的会感觉在写诗,哈哈,Fira Code 的安装过程稍微复杂点,但是效果绝对是值当的;

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

风格检查

如果编辑器在编码时实时给出反馈,对开发者个人而言才是最高效的,在提交时做强制检查只是从团队的视角保证编码风格的规范性和一致性。前端工程师会书写的代码无非是:HTML、CSS、Javascript、Markdown、TypeScript、JSON,对应的 Lint 工具就显而易见:

  • ESLint:插件式架构,有多种主流的编码风格规则集可供选择,典型的有 Airbnb、Google 等,你甚至可以攒个自己的,按下不表;
  • StyleLint,同样插件式架构的样式检查工具,不过我在配置其检查 react-native 中 styled-components 组件样式时确实费了不小的功夫,可以单独写篇文章了;
  • TSLint:TypeScript 目前不是我的主要编程语言,但也早早的准备好了;
  • MarkdownLint:Markdown 如果不合法,可能在某些场合导致解析器异常,因为 Markdown 有好几套标准,在不同标准间部分语法支持可能是不兼容的;

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

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

  • Prettier,实际上已经是代码格式化的工具标准,支持格式化几乎所有的前端代码,并且类似于 EditorConfig 支持用文件来配置格式规则;
  • Vetur,格式化 .vue 文件,包括里面的 CSS、JS,至于模板即 HTML 部分,官方维护者说没有比较好的工具支持,默认是不格式化的;

编码效率

说到编码效率,连续六年几乎每天都编码的我目前最大的感受是:击键的速度越来越跟不上思维的速度,这种情况下,就需要在编码时设置适当的快捷键,组合使用智能建议、代码片段、自动补全来达到速度的最大化。

VSCode 内置的智能建议已经非常强大,不过我对默认的配置做了如下修改,以达到类似于在 Vim 中那样在任何地方都启用智能提示(尤其是注释和字符串里面):

接下来,重点说说代码片段和自动补全两个效率提升利器。

代码片段

英文叫做 Snippets,市面上主流的编辑器也都支持,其基本思想就是把常见的代码模式抽出来,通过 2~3 个键就能展开 N 行代码,代码片段的积累一方面是根据个人习惯,另一方面是学习社区里面积累出来的好的编码模式,如果觉得不适合你,可以改(找个现有的插件依葫芦画瓢),我常用的代码片段插件如下:

  • HTML Snippets,各种 HTML 标签片段,如果你 Emmet 玩的熟,完全可以忽略这个;
  • Javascript (ES6) Code Snippets,常用的类声明、ES 模块声明、CMD 模块导入等,支持的缩写不下 20 种;
  • Javascript Patterns Snippets,常见的编码模式,比如 IIFE;

自动补全

自动补全本质上和代码片段类似,不过是在特殊场合下以你的键入做为启发式信息提供最有可能要输入的建议,我常用的自动补全工具有:

  • 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,CSS 类名补全,会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示;
  • Emmet,以前叫做 Zen Coding,我发现后,也是爱不释手,可以把类 CSS 选择符的字符串展开成 HTML 标签,VSCode 已经内置,官方介绍文档参见,你需要做的就是熟悉他的语法,并勤加练习;

当然,如果你还用 VSCode 编写其他语言的代码,比如 PHP,就去市场上搜索 “PHP Intellisense” 好了。

功能增强

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

  • Color Highlight,识别代码中的颜色,包括各种颜色格式;
  • Bracket Pair Colorizer,识别代码中的各种括号,并且标记上不同的颜色,方便你扫视到匹配的括号,在括号使用非常多的情况下能环节眼部压力,编辑器快捷键固然好用,但是在临近嵌套多的情况下却有些力不从心;
  • Project Manager,项目管理,让我们方便的在命令面板中切换项目文件夹,当然,你也可以直接打开包含多个项目的父级文件夹,但这样可能会让 VSCode 变慢;

结语

提高效率有没有法门?是有的,简单的事情重复化,重复的事情标准化,标准的事情自动化,发现一个痛点,用插件解决一个痛点,你的效率自然就上来了。


本文作者:王仕军

原文链接:https://juejin.im/post/5a08d1d6f265da430f31950e

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-11-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 腾讯NEXT学位 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 工欲善其事必先利其器,软件工程师每天打交道最多的可能就是编辑器了。入行几年来,先后折腾过的编辑器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、VSCode。
  • 外观配置
  • 编码效率
    • 代码片段
      • 自动补全
      • 功能增强
      • 结语
      相关产品与服务
      项目管理
      CODING 项目管理(CODING Project Management,CODING-PM)工具包含迭代管理、需求管理、任务管理、缺陷管理、文件/wiki 等功能,适用于研发团队进行项目管理或敏捷开发实践。结合敏捷研发理念,帮助您对产品进行迭代规划,让每个迭代中的需求、任务、缺陷无障碍沟通流转, 让项目开发过程风险可控,达到可持续性快速迭代。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档