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. 优化注释

假如喜畛刳代码中添加注释，也许会呈现由于代码过于麋集而找不到注释的环境。

（编辑：湖南网）

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