综合开发

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

微信扫一扫,分享到朋友圈

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

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

浏览器扩展篇

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

扩展商店

体验优化

开发常用

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

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

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

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

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

  • Lighthouse
    网站性能测评工具

  • JSON Formatter
    JSON 格式化

GitHub 相关

油猴

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

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

Markdown 相关

  • Markdown All in One

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

Git 相关

  • GitLens — Git supercharged

格式化相关

调试相关

  • 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"
}
复制代码

发挥供应链优势 十荟团助力年桔滞销变畅销

上一篇

数聚粤港澳,智汇大湾区 “华为云杯”2020深圳…

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

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

长按储存图像,分享给朋友