阅读 1504

《头整秃了系列》能让你提升效率的 VS Code 插件和 Chrome 扩展程序

前言

最近不少人问我的 VS Code 插件都装了啥,我也懒得一个个回复,于是连夜整理了下,把我头都整秃了


Visual Studio Code 扩展篇

主题相关

React 相关

  • ES7 React/Redux/GraphQL/React-Native snippets
    • 提供 ES7 中的 JavaScript 和 React / Redux 片段,以及针对 VS Code 的 Babel 插件功能
    • 插件地址

Vue 相关

  • Vue 2 Snippets

    • 基于最新的 Vue 2 的 API 添加了 Code Snippets
    • 插件地址
  • Vetur

    • Vue 文件语法高亮、片段整理、错误检查、格式化
    • 插件地址

CSS 相关

微信小程序相关

  • minapp
    • 微信小程序标签、属性的智能补全(同时支持原生小程序、mpvuewepy 框架,并提供 snippets)
    • 插件地址

Markdown 相关

  • Markdown All in One

    • 为 Markdown 增加键盘快捷键,目录,自动预览等)
    • 插件地址
  • markdownlint

Git 相关

  • GitLens — Git supercharged

格式化相关

  • ESLint

  • Prettier - Code formatter

调试相关

  • Debugger for Chrome
    • 在 Chrome 浏览器或任何其他支持 Chrome Debugger 协议的目标中调试 JavaScript 代码
    • 插件地址

本地服务

  • Live Server
    • 启动具有实时重新加载功能的开发本地服务器
    • 插件地址

其他

  • Auto Close Tag

  • Auto Rename Tag

  • Auto Import

    • 自动查找,解析并提供所有可用导入的代码操作和代码完成。 与 Typescript 和 TSX 一起使用
    • 插件地址
  • Import Cost

    • 在编辑器中显示导入/需要包的大小(PS:小内存用户不建议使用,说的就是你这个用 8G 的)
    • 插件地址
  • Image preview

    • 在行号边上、悬停时显示图像预览
    • 插件地址
  • Path Intellisense

  • npm Intellisense

  • Chinese (Simplified) Language Pack for Visual Studio Code

    • 适用于 VS Code 的中文(简体)语言包
    • 插件地址
  • EditorConfig for VS Code

  • Settings Sync

    • 使用 GitHub Gist 在多台机器上同步设置,代码片段,主题,文件图标,启动,键绑定,工作区和扩展。
    • 插件地址

推荐配置

// 将设置放入此文件中以覆盖默认设置
{
  "files.autoSave": "off",
  "files.autoSaveDelay": 1500,
  "editor.tabSize": 2,
  // 关闭快速预览
  "editor.minimap.enabled": true,
  "editor.wordWrap": "on",
  "editor.lineNumbers": "on",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // bug控制缩进不关tabSize修改无用
  "editor.detectIndentation": false,
  // 保存格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    // "source.organizeImports": true,
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  // eslint 配置
  "eslint.options": {
    "extensions": ["js", ".vue"]
  },
  "eslint.format.enable": true,
  "eslint.validate": ["vue", "html", "javascript", "javascriptreact", "jsx", "typescript"],
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.printWidth": 100,
  "prettier.packageManager": "yarn",
  "prettier.spaceBeforeFunctionParen": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 参考线
  "workbench.colorTheme": "Bluloco Dark",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.editor.enablePreview": false,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "vue-html": "html",
    "javascript": "javascriptreact",
    "wxml": "html"
  },
  // 搜索配置
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "gitlens.keymap": "alternate",
  "explorer.confirmDragAndDrop": false,
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 80, // No line exceeds 100 characters
      "singleQuote": false // Prefer double quotes over single quotes
    },
    "prettier": {
      "semi": false,
      "singleQuote": true,
      "eslintIntegration": true,
      "parser": "babylon"
    }
  },
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "minapp-vscode.disableAutoConfig": true,
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "highlight-matching-tag.styles": {
    "opening": {
      "left": {
        "custom": {
          "borderWidth": "0 0 0 4px",
          "borderStyle": "solid",
          "borderColor": "LightSkyBlue",
          "borderRadius": "5px"
        }
      },
      "right": {
        "custom": {
          "borderWidth": "0 4px 0 0",
          "borderStyle": "solid",
          "borderColor": "LightSkyBlue",
          "borderRadius": "5px"
        }
      }
    }
  },
  "less.compile": {
    "outExt": "wxss"
  },
  "typescript.updateImportsOnFileMove.enabled": "always"
}
复制代码

浏览器扩展篇

地址均为 chrome 网上应用店,需科学一下

扩展商店

体验优化

开发常用

  • Vue.js devtools用于调试 Vue.js 应用程序

  • React Developer Tools用于调试 React 应用程序

  • Redux DevTools用于调试应用程序 Redux 状态更改

  • 掘金在新标签页展示聚合内容,包含前端、Android、iOS、后端、产品、设计六大频道,每个频道内都有一到多个内容源

  • WEB 前端助手(FeHelper)包括字符串编解码、图片 base64 编码、代码压缩、美化、JSON 格式化、正则表达式、时间转换工具、二维码生成器、编码规范检测、页面性能检测、栅格检测、JS 运行效率分析

  • Lighthouse网站性能测评工具

  • JSON FormatterJSON 格式化

GitHub 相关

油猴


彩蛋之 Mac 微信的功能拓展

  1. 消息防撤回
  2. 免认证登录与多开
  3. 退群监控
  4. 屏蔽更新

安装

# 安装小助手
curl -o- -L https://raw.githubusercontent.com/lmk123/oh-my-wechat/master/install.sh | bash -s

# 更新小助手
omw

# 微信在自动更新后会删除小助手,可运行以下命令恢复
omw -n
复制代码

软件地址

其他

如果有其他更好用的、或者不足之处,欢迎评论指出,感激不尽!!!

为了浏览方便,没有放预览图,如有需要可后续加上

Github 地址

原文地址 - Visual Studio Code 扩展

原文地址 - 浏览器扩展

关注下面的标签,发现更多相似文章
评论