前端vsCode常用插件推荐并留档

首先基础的插件安装:方便代码书写、阅读及美观

// 适用于 VS Code 的中文(简体)语言包
Chinese (Simplified) Language Pack for Visual Studio Code
// VSCode 注释翻译
Comment Translate
// 自动关闭标签
Auto Close Tag
// 自动重命名标签
Auto Rename Tag
// 美化代码
Beautify
// 美化代码
Prettier - Code formatter
// 智能路径
Path Intellisense
//  支架对着色器
Bracket Pair Colorizer
//  文件图标
vscode-icons
//  es规范扩展
ESLint

其次根据自己所用框架进行安装:目前使用react

// react 代码片段
ES7 React/Redux/GraphQL/React-Native snippets

最后非开发必须的插件:给人眼前一亮的感觉

//  多种自定义注释颜色
Better Comments
//  在vscode 进行浏览器预览
Browser Preview
//  文件函数预设注释模板
koroFileHeader
//  提供更多的代码实现方式推荐和问题推荐修复
JavaScript Booster
//  截图更美观
Polacode-2020

把自己的vsCode配置sttings.json贴出来-留档

{
  "editor.fontSize": 16, //字体大小
  "editor.tabSize": 2, //换行空格数
  "editor.lineHeight": 24, //行高
  "editor.wordWrap": "on", //自动换行
  "editor.minimap.enabled": true, //是否显示缩略图
  "editor.formatOnSave": true, //保存时格式代码
  "editor.multiCursorModifier": "ctrlCmd", //按住Ctrl打开链接
  "editor.mouseWheelZoom": false, // 通过使用鼠标滚轮同时按住 Ctrl 可缩放编辑器的字体

  "workbench.sideBar.location": "right", //控制栏的位置
  "workbench.iconTheme": "vscode-icons", //文件图标
  "workbench.statusBar.visible": true, //控制台底部是否可见
  "workbench.activityBar.visible": true, //控制台活动栏是否可见

  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //  让函数(名)和后面的括号之间加个空格

  "prettier.semi": true, //  去掉代码结尾的分号
  "prettier.singleQuote": true, //  使用单引号替代双引号

  "emmet.showSuggestionsAsSnippets": true,
  "typescript.updateImportsOnFileMove.enabled": "always",// 始终自动更新路径
}

注:我的配置大部分保留插件默认的,具体配置根据自己需求进行配置 ,期待相互学习

猜你喜欢

转载自blog.csdn.net/weixin_42698255/article/details/107806880