Home>Article>Development Tools> 27 Amazing VSCode Tools for JavaScript Developers
Visual Studio Code（也称为VSCode）是一种轻量级但功能强大的跨平台源代码编辑器, 借助对TypeScript 和Chrome调试器等开发工具的内置支持，越来越多的开发都都喜欢使用它。
如果你正在寻找更多的好用的 VSCode 工具，那么这篇或许能够帮助你。以下是 2019年为 JS 开发者提供的27个不可思议的VSCode工具。
1. Project Snippets (代码片段)
project snippets，这是我最喜欢的一个工具，它来自于 VSCode 中内置的原始用户代码片段。 该特性允许你创建自己的代码段，以便在整个项目中重用。
但是**“重用”**它们到底意味着什么？
如果咱们经常要重复写下面这样的样板文件：
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
实际上，咱们可以直接将上面的代码放到的用户代码片段中，因此不必写出(或复制和粘贴)整个代码片段，只需键入一个自定义前缀来生成配置的代码片段即可。
打开 VsCode，然后选择文件 >首选项 > 用户代码片段，则可以选择通过单击'新建全局代码片段文件'来创建新的全局代码片段。
例如，要为 TypeScript React 项目创建自己的代码片段文件，可以单击新建全局代码片段文件，输入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键 VSCode 就会帮咱们生成代码片段内容。
const initialState = { // } 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'," } }
这对于具有特定file/folder结构的项目可能就足够了，但是如果咱们正在处理另一个项目，其中Link组件具有类似components/Link的路径，该怎么办？
请注意这三个border tests是如何将它们的值用单引号括起来的：border: '1px solid red'。
这在 JS 中是完全有效的，但是如果使用styled-components作为项目的样式解决方案呢?该语法不再适用于该工作区，因为styled components使用普通的CSS语法
这就是project snippets的亮点所在。
Project snippets使咱们可以声明项目/工作区级别的代码段，让当前项目代码段不会与其它项目冲突也不会污染其他项目。
2. Better Comments(更加人性化的注释)
如果喜欢在代码中编写注释，那么有时你可能会发现搜索您以前编写的特定注释的位置是令人沮丧的，因为代码可能会变得有些拥挤。
有了Better Comments，可以通过引入彩色注释使注释更加明显。
3. Bracket Pair Colorizer (标签匹配 括号匹配插件)
第一次看到Bracket Pair Colorizer的屏幕截图时，我第一时间入安装使用了。
4. Material Theme
Material Themeis an epic theme that can be installed directly into VSCode. After installation, the code looks like this:
##5. @typescript-eslint/parser
If you are a TypeScript user, you should start thinking about moving your TSLint configuration toESLint TypeScript,# The backers behind ##TSLint have announced plans to deprecate TSLintsometime this year.Projects are gradually adopting
and related packages to ensure a future-proof setup for their projects.We can still take advantage of most of ESLint's rules and compatibility and use the new settings more beautifully.
6. StylelintFor me,
stylelintis the most popular in all my All necessary in projects:
7. Markdownlint docsifymarkdown lovers must try The
markdownlintextension on vscode will use green wavy lines to prompt you with N many places that do not comply with writing standards, such as:
this typehtml# cannot appear in the text ##label
## and also Can be installed withdocsify
If developers are used to writing to-do items in application code, they can install an extension like TODO Highlight Names are useful for highlighting to-do items set throughout the project.
9. Import Cost
Import Costcan be displayed in VS The size of imported packages in the code editor.
10. Highlight Matching Tag
Sometimes it can be frustrating trying to match where a tag ends , thenHighlight Matching Tagcomes in handy
##11. vscode-spotify
Programmers often type code while listening to music. Sometimes, in the middle of writing, the song is too unpleasant. If I want to switch, I have to switch to the music player and then return to the VsCdoe interface, which is a bit troublesome.This is wherevscode-spotifycomes in handy, because it can use the music player directly within VSCode.
With this extension, you can see the currently playing song in the status bar, switch between songs through hotkeys, click buttons to control the music player, etc.
12. GraphQL for VSCodeGraphQL一直在发展，咱们经常可以在 JS 社区中看到它的身影。因此，最好开始考虑在 VSCode中安装GraphQL for VSCode。
13. Indent-Rainbow
Indent-Rainbow会给缩进添加一种颜色,让你更加直观的看到代码层次。
14. Color Highlight
Color Highlight可以在代码中突出显示颜色，如下所示：
15. Color Picker
Color Picker是一个 VSCode 扩展，它为咱们提供了一个图形用户界面，用来选择和生成颜色代码，如 CSS 颜色符号。
16. REST Client
第一次看到REST Client并尝试它时，与现有的软件(如Postman)相比，它似乎不是一个非常有用的工具。
但是，对REST Client扩展的用法了解越多，就会意识到它对开发工具的影响有多大，尤其是在测试API 时。
只需要创建一个新文件写入下面这一行：
https://google.com
然后转到命令面板(CTRL + SHIFT + P)，单击Rest Client: Send request，它会在一瞬间弹出一个包含请求响应详细信息的新选项卡，非常有用：
甚至还可以传递参数，或将请求体数据请求到POST，而下面仅需几行代码：
POST https://test.someapi.com/v1/account/user/login/ Content-Type: application/json { "email": "someemail@gmail.com", "password": 1 }
就会发送POST请求，参数为{ "email": "someemail@gmail.com", "password": 1 }。
17. Settings Sync
vscode上有各种各样不同的插件，如果要在不同的电脑上使用vscode配置是件比较麻烦的事情，使用Settings Sync将vscode配置备份起来，当需要在其他电脑使用vscode时只需下载备份的配置就可以了。
咱们只需要一个 GitHub 帐户，并且每次要保存配置（包括按键绑定，代码片段，扩展名等）时，只需按SHIFT + ALT + U将私有设置上传到GitHub帐户即可。 然后，下次登录或重新格式化为另一台计算机时，可以按SHIFT + ALT + D组合键立即下载配置。
18. Todo Tree
Todo Tree将帮助咱们找到在整个应用程序代码中创建的所有待办事项。它将把它们放到一个单独的树中，还可以在面板的左侧同时查看它们
19. Toggle Quotes
Toggle Quotes是一个有趣的实用工具扩展，它允许咱们在引号之间进行切换。当需要在使用字符串插入时切换到反引号时，它就派上用场了。
20. Better Align
Better AlignAlign assignment symbols and comments. To use it, place your cursor in the code you want to align, open the Command Palette usingCTRL SHIFT P(or use a custom shortcut to open the Command Palette), and then call theAligncommand .
21. Auto Close Tag
Auto Close TagAuto close html Label.
22. Sort Lines
Sort linescan help us sort and select OK.
23. VSCode Google Translate
If it is a project involving multi-language development,VSCode Google Translatecan help us switch languages quickly.
24. Prettier
Prettieris an extension of VSCode that can automatically Format JavaScript/TypeScript, etc. to make the code more beautiful.
25. Material Icon Theme
I prefer## compared to other icon themes #Material Icon Theme, because the file type is more obvious, especially when using a dark theme.
26. IntelliSense for CSS Class Names in HTML
IntelliSense for CSS Class Names in HTML, based on definitions found in the workspace, and provides CSS class name completion.
27. Path Intellisense
Path IntellisenseAutomatic path completion.
The above is the detailed content of 27 Amazing VSCode Tools for JavaScript Developers. For more information, please follow other related articles on the PHP Chinese website!
