Visual Studio Cod e(也被称为 VSCode,https://code.visualstudio.com/) 是一款功能强大的轻量级跨平台桌面源代码编辑器. 由于其内置开发工具支持 TypeScript 和 Chrome 开发者工具, 这款编辑器让人越用越喜欢.
每个人都能使用和修改的无限扩展的开放源代码, 谁不爱呢? 希望这篇文章能帮你找到扩充开发工具箱的新工具.
虽然下列工具并不都是 JavaScript 语言专用, 但它们都是 JavaScript 开发者会感兴趣的. 以下是 2019 年 JavaScript 开发者的 27 个神奇的 VSCode 工具.
1. 项目代码段
第一个是由 VSCode 内置的用户代码段 (https://code.visualstudio.com/docs/editor/userdefinedsnippets) 衍生而来的项目代码段(https://marketplace.visualstudio.com/items?itemName=rebornix.project-snippets).
这项功能能让开发人员创建自己的代码段, 并在项目中重复使用.
但是 "重复使用" 到底是什么意思呢?
如果开发人员经常编写像下面这样的样板代码:
- import{
- useReducer
- } from'react'
- const initialState = {
- //
- }
- const reducer = (state, action) => {
- switch (action.type) {
- default:
- return state
- }
- }
- const useSomeHook = () => {
- const [state, dispatch] = useReducer(reducer, initialState)
- return {
- ...state,
- }
- }
- export default useSomeHook
开发人员可以直接将这段代码放到 "用户代码段" 中, 通过键入自定义前缀来生成设置的代码段, 而不用重新写入或是复制粘贴整个代码段.
你可以通过 File> Preferences> User Snippets, 点击 New Global Snippets File 来选择并创建一个新的开放代码段.
比如说, 如果要新建一个 TypeScript React 项目, 可以点击 New Global Snippets File, 输入文件名 typescriptreact.JSON, 进入新创建的 JSON 文件, 用 TypeScript 语言来创建 React 应用.
又比如, 如果要用上文中的案例代码来创建一个新的用户代码段, 应该这样做:
- {
- {
- "const initialState = {}; const reducer = (state, action)": {
- "prefix": "rsr",
- "body": [
- "const initialState = {",
- "//$1",
- "}",
- "","const reducer = (state, action) => {
- "," switch (action.type) {
- "," default:"," return state","
- }","
- }"
- ]
- }
- }
然后, 创建一个以. tsx 结尾的 TypeScript 文件, 输入前缀 rsr 之后就会跳出生成这个代码段的建议.
在弹出窗口上点击 tab 键就能生成这一代码段:
- constinitialState = {
- //
- }
- const reducer = (state, action) => {
- switch (action.type) {
- default:
- return state
- }
- }
这么做的优点在于: 所有项目都可以使用这一技巧, 这对于一些适用性比较广的程序段尤其有用.
有些项目会有不同的设置. 因此, 在需要区分特定的使用情况时, 设置公开文件的代码段就会有困难.
比如说, 当项目之间结构不同时:
- {
- {
- "import Link from components/common/Link": {
- "prefix": "gcl",
- "body": "import Link from'components/common/Link'"
- },"border test": {
- "prefix":"b1","body":"border: '1px solid red',"
- },"border test2": {
- "prefix":"b2","body":"border: '1px solid green',"
- },"border test3": {
- "prefix":"b3","body":"border: '1px solid magenta',"
- }
- }
对于 "指定文件 / 文件夹" 结构的项目来说, 可能这样就够了. 但是, 如果需要开发一个链接成分的路径为 components/Link 的项目呢?
请注意在三个边界测试中, 边界值要用单引号框住: border: '1px solid red'.
这对于 JavaScript 来说是非常有效的. 但是, 如果使用样式化组件作为样式化方案, 原来的语法规则就不再适用了, 因为样式化组件应用的是标准 CSS 语法!
这就到了项目代码段大放光彩的时刻了.
项目代码段让程序员能够区分项目层次和工作区层次的代码段, 这样就能避免代码段冲突或者污染其他项目, 这一点非常实用!
2. 优化注释
如果喜欢在代码中添加注释, 可能会出现因为代码过于密集而找不到注释的情况.
借助优化注释工具 (https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) 可以把注释变成显目的彩色.
这样就可以轻松地通过添加! 或者? 来提醒组员需要注意的地方了.
3. 括号配对着色
第一次见到括号配对着色 (https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 的截图时, 笔者就决定要将其加入开发工具箱中.
对于酷爱编程的人来说, 这个扩展无疑能让编程变得更加有趣.
4. Material Theme
Material Theme(https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)是一款能直接安装到 VSCode 的悠久主题, 它能让代码变成下面这样:
这是目前为止最棒的主题了, 赶快安装吧!
5. @typescript-eslint/parser
TypeScript 用户可能已经开始由 TSLint 配置转向 ESLint + TypeScript 配置了, 因为今年, TSLint 背后团队宣布将弱化对其的支持.
因此现在越来越多的项目采用 @typescript-eslint/parser 及相关的软件包, 以保证项目设置不会过时.
在 Prettier 网站上, 依然可以用最新的设置体验 ESLint 的规则和兼容性.
6. Stylelint
对于所有项目来说, Stylelint(https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint)都是必备的, 原因有以下几个:
. 它能避免出错.
. 它能执行 CSS 的代码风格规范.
. 它能与 Prettier 配合使用.
. 它能支持 CSS/ SCSS/Sass/Less.
. 它能支持社区创建的插件.
7. Markdownlint + docsify
有些人可能有这样的习惯: 在开项目讨论会时, 用 Markdown(https://daringfireball.net/projects/markdown/)格式记笔记.
这样的笔记易于理解, 而且有很多便利的 Markdown 文档工具, 其中就包括 markdownlint.
Markdownlint 是一款 VSCode 扩展, 它不但能帮助检查. md 文件的书写规范, 而且支持 Prettier 格式!
笔者在所有项目中都应用了 docsify, 因为它支持 Markdown 和其他强化.
8. TODO 高亮
如果有把待办项记录在应用代码中的习惯, TODO 高亮这样的扩展就会非常有用, 因为它能够把整个项目中的 TODO 都设置为高亮.
9. Import Cost
第一次尝试的时候, 你可能会觉得 Import Cost 非常有用. 但是用了一会你可能就不再需要它了, 因为它告诉你的你都已经知道了. 尽管如此, 还是建议你尝试一下, 因为你可能会需要它.
10. Highli ght Matching Tag
找不到标签的另一端时, Highlight Matching Tag 就能派上用场了:
11. vscode-spotify
有些人会觉得切换到音乐软件切歌, 然后回到 VSCode 界面继续工作有些麻烦.
Vscode-spotify 就能解决这个麻烦, 因为它能让程序员在 VSCode 里使用 Spotify(Spotify 是瑞典的在线流媒体音乐播放平台, 民间译名 "声田" 或者 "声破天")!
有了这个扩展就可以在状态栏看到正在播放的歌曲, 通过热键切换歌曲, 点击按键控制 Spotify, 等等.
12. 用于 VSCode 的 GraphQL
随着 GraphQL 逐步发展, 几乎每个 JavaScript 社区都能看到它的身影. 鉴于此, 考虑安装用于 VSCode 的 GraphQL 也许是个不错的主意.
通过这个工具, 就可以在处理 GraphQL 语法时使用语法高亮, linting 以及自动完成等功能.
因为笔者经常使用 Gatsby, 所以日常编程中常常涉及到 GraphQL 语法.
13. 彩虹缩进
跟上文中使用括号配对着色的理由类似. 如果很难找到对应的缩进, 使用彩虹缩进就能让缩进更有可读性.
请看这个例子:
14. Color Highlight
这是一个到哪都会被问链接的扩展. 简单来说, Color Highlight 会这样给代码中的颜色标注高亮:
15. 拾色器
拾色器是一款图形用户界面的 VSCode 扩展, 它帮助用户选择并生成颜色代码, 比如说 CSS 颜色值.
16. REST Client
第一次尝试 REST Client 时, 笔者并不认为这个工具会比著名的 Postman 软件更好用.
随着使用的深入, 笔者逐渐意识到 REST Client 扩展给开发工具带来的巨大影响, 尤其是在测试 API 时.
你可以新建一个文件, 输入: https://google.com.
只需要高亮这一行, 进入控制面板(快捷键: CTRL + SHIFT + P), 点击 REST Client: Send Request 就可以发起 HTTP GET 请求, 很快响应详情就会出现在弹出的新标签页中.
这非常有用:
甚至可以略过参数或者请求 body 数据来发起 POST 请求, 只需要添加下面这几行代码:
- POSThttps://test.someapi.com/v1/account/user/login/
- Content-Type: application/JSON
- {
- "email": "someemail@gmail.com", "password": 1
- }
这样就可以发起一个以 { "email": "someemail@gmail.com", "password": 1 } 为 body 参数的 POST 请求了.
而这只是这个扩展最基础的功能.
更多信息传送门: https://marketplace.visualstudio.com/items?itemName=humao.rest-client
17. Settings Sync
如果非常讨厌既要手写一份 Markdown 笔记记录用到的扩展工具, 又要记录在印象笔记这样的笔记应用中, Settings Sync 就能解决这个烦恼.
只需要一个 Gist/GitHub 账户, 在记录快捷键, 代码段, 扩展等设置时, 同时按下 SHIFT + ALT + U, 就可以将个人设置上传到 Gist 账户. 下次登录或者设置另一台电脑时, 运用快捷键 SHIFT + ALT + D 就可以下载设置了.
18. Todo Tree
Todo Tree 能找到应用代码中的所有待办项, 并整理到面板左侧的单一树架结构中.
19. Toggle Quotes
Toggle Quotes 是个有趣而实用的扩展, 它能够切换引号. 在插入字符串, 需要切换到反引号时, 尤其是当 Prettier 总是美化代码时给字符串加上单引号的时候, Toggle Quotes 就能派上用场.
20. Better Align
使用 Better Align, 不用预先选定就可以对齐所有代码.
只需把光标放在需要对齐的代码上, 通过 CTRL + SHIFT + P(或者是其他自定义的快捷键)打开控制面板, 就可以调用 Align 命令.
21. 自动闭合标记
自动闭合标记是一个第一次使用 VSCode 时就能派上用场的工具. 如果输入 < div 再加一个斜线号 /, 它会自动补完后面的>符号.
虽然这个工具并不是 VSCode 专有, 但是它非常有用.
22. Sort Lines
有人会因为文本行没有按照字母顺序排列而不舒服, 幸运的是, Sort lines 这样的工具对强迫症患者非常友好.
如果你也有类似的强迫症, 你也许会觉得这个工具有用.
23. VSCode 谷歌翻译
可能很多人认为这个工具没什么用处. 因为笔者在多语言环境中工作, 所以 VSCode 谷歌翻译在项目中非常有用.
运用这个工具, 可以在编辑界面内查单词.
24. Prettier
Prettier 是一款自动优化 JavaScript,TypeScript 等代码格式的 VSCode 扩展.
25. Material Icon Theme
相比于其他图标主题, 笔者更喜欢 Material Icon Theme, 因为这款主题让不同的文件类型更易于区分, 特别是在应用了暗色主题的情况下.
26. IntelliSense for CSS Class Names in html
IntelliSense for CSS class names in HTML 能够基于工作区内的定义将 HTML 中 CSS class 的名字补全.
27. Path Intellisense
Path Intellisense 是一款能够自动补全文件名的 VSCode 扩展.
+web 前端扣扣裙: 956766604 免费网课在线学习以及问题解答, 项目指导服务, 配合强大的学习工具, 带你完成九大实战项目, 经历从零基础到专业前端工程师的完美蜕变.
欢迎初学和进阶中的小伙伴. 裙里有免费的学习资料, 还有专业老师为你解惑, 更有免费体验课, 免费直播课等福利不定期放送.
来源: http://www.jianshu.com/p/2c9e9127202a