Bling bling -- VS Code 常用插件

这些常用插件可以说是前端开发必备的 plugins：

1. Material Theme 主题都比较清新

Material Theme.png

2. 安装主题插件之后发现左侧的目录层级错位有些不明显，这时候要改下 setting.json 的设置

 //根据官方文档，这个值最大是 20，写超过 20 会报错
"workbench.tree.indent": 8    

before.png

after.png

3. 接下来安装下 vscode-icon 的插件，文件类型一目了然

   
   
   

   vscode-icon.png

效果图：

icon.png

安装完需要点击启用，或者添加配置至 setting.json：

"workbench.iconTheme": "vscode-icons",

4. HTML Snippets 代码补全

   
   
   

   html.png

5. Prettier 代码格式化插件

prettier.png

prettier 还有些配置很有用处，详情查看 https://www.jianshu.com/p/4be58a69b20f

闪闪发光的小样子

Bling.png

6. 补充一些其他特别有用处的插件：

• 生成 React 代码片段：Full React/React Native/React Router/Redux/GraphQL/ES7/Testing/PropTypes snippets
• 括号配对着色 Bracket Pair Colorizer
• TODO 高亮: TODO Highlight
• 计算导入模块的大小：Import Cost
• 自动闭合标签 -- Auto Close Tag
• 自动重命名标签 -- Auto Rename Tag
• 具有居中布局的禅模式或者勿扰模式 (Zen Mode)

7. 补充一个项目开发中的格式化的问题
   每次格式化都会产生空格，但是配置文件已经写了「 "bracketSpacing": false」
   原因是没有给 js 文件和 jsx 文件指定格式化的规范，配置代码如下，

"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}