JavaScript开发者的27个神奇VSCode工具

Visual Studio Code（也被称为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键就能生成这一代码段：

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'," 
 } 
} 

对于“指定文件/文件夹”结构的项目来说，可能这样就够了。但是，如果需要开发一个链接成分的路径为components/Link的项目呢？

请注意在三个边界测试中，边界值要用单引号框住：border: '1px solid red'。

这对于JavaScript来说是非常有效的。但是，如果使用样式化组件作为样式化方案，原来的语法规则就不再适用了，因为样式化组件应用的是标准CSS语法！

这就到了项目代码段大放光彩的时刻了。

项目代码段让程序员能够区分项目层次和工作区层次的代码段，这样就能避免代码段冲突或者污染其他项目，这一点非常实用！

2. 优化注释

如果喜欢在代码中添加注释，可能会出现因为代码过于密集而找不到注释的情况。

（编辑：常州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!