前言

vscode常用的前端插件推荐，编写代码，事半功倍。

安装

安装方法有两种，一种是直接在vscode编辑器中直接安装，另外一种是下载好插件导入到vscode。 下载地址：code.visualstudio.com/download

插件推荐

自动补全

• ES7 React/Redux/GraphQL/React-Native Snippets

• Auto Close Tag 自动闭合JSX标签名

• Auto Rename Tag 自动补全匹配标签

• CSS Modules 自动补全，点击跳转相对应的位置（用处不大，只用写成styles.width时可以使用，当写成styles['width'] 没用）
• Path Intellisense 路径自动补全
• Npm Intellisense 自动完成导入语句中的npm模块

调试

• Debugger for Chrome 可以在vscode中打断点调试

{
    "version": "0.2.0",
    "configurations": [{
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080", // 启动程序时，需要改成程序的网址
            "webRoot": "${workspaceRoot}",
            "file":"${workspaceRoot}" // 如果静态文件调试，改成静态文件地址
        }
    ]
}

汉化

• Chinese (Simplified) Language Pack for Visual Studio Code 汉化包

美化

• One Dark Pro 代码主题风格
• vscode-icons 文件名的图标个性化

• Bracket Pair Colorizer 让对应的括号有自己颜色

格式化代码

• Prettier - Code formatter 自动格式化代码
• ESLint ESLint检查
• TSLint TSLint检查

git

• Git History 可以查看git日志

• GitLens 查看代码提交人

HTTP测试工具

• REST Client http测试工具，模拟请求

点击图片中Send Request

注释

• koroFilerHeader 快速生成注释 在vscode安装之后再setting自定义区加上下面代码

 "fileheader.customMade": {
    "description": "",
    "author": "li.kexin",
    "Date": "Do not edit" // 文件创建时间(不变)
  },
  "fileheader.cursorMode": {
    "description": "",
    "param": "",
    "returns": ""
  },

详细请参考juejin.cn/post/695490…

疑问

请问有人使用过doxygen documentation generator注释插件吗，我怎么配置都不起作用，求告知Ծ‸Ծ。欢迎大家提出好用的插件。