vscode前端开发如何多端共享配置和插件?

找到 vscode 的一个插件 Settings Sync ,从此不再需要保存配置了~
只要登录上 GitHub,并且将 vscode 配置上传即可多端共享。

第一步:

在 GitHub 上创建一个 Gist ID:
在这里插入图片描述
在这里插入图片描述

第二步

将上一步生成的 gist ID 输入到 Settings Sync 插件中。
在这里插入图片描述

第三部

将本地配置上传。
在这里插入图片描述

第四步

登录第二台装有 vscode 的电脑,装上该插件并将配置下载下来即可。

分享我的配置

Auto Close Tag
Auto Import
Auto Rename Tag
Bracket Pair Colorizer
Chinese (Simplified) Language Pack for Visual Studio Code
Code Runner
dark-plus-syntax // 一个主题
Debugger for Chrome
Document This
Drupal Syntax Highlighting
EditorConfig for VS Code
ESLint
Git History
gitignore
Git History Diff
GitLens — Git supercharged
HTML CSS Support
HTML Snippets
IntelliSense for CSS class names in HTML
Image preview
JavaScript (ES6) code snippets
JavaScript Snippet Pack
Live Server
Markdown Preview Enhanced
Material Icon Theme
npm
npm Intellisense
open in browser
Path Autocomplete
Prettier - Code formatter
Power Mode  // 一个炫酷的风格
Project Manager
Settings Sync
SVG Viewer
Visual Studio IntelliCode
vscode-flow-ide
TabNine
Vetur
vscode-icons
Vue 2 Snippets

设置 settings

{
  "terminal.external.osxExec": "iTerm.app",
  "terminal.integrated.shell.osx": "zsh",
  "terminal.integrated.fontFamily": "Meslo LG M for Powerline",
  "terminal.integrated.fontSize": 14,
  // 终端主題颜色
  "workbench.colorCustomizations": {
    "terminal.foreground": "#877a9b",
    "terminal.background": "#1b1b23",
    "terminal.ansiBlack": "#000000",
    "terminal.ansiBlue": "#564d9b",
    "terminal.ansiCyan": "#808080",
    "terminal.ansiGreen": "#01a252",
    "terminal.ansiMagenta": "#6c3ca1",
    "terminal.ansiRed": "#b0425b",
    "terminal.ansiWhite": "#87799c",
    "terminal.ansiYellow": "#ad5c42",
    "terminal.ansiBrightBlack": "#5d3225",
    "terminal.ansiBrightBlue": "#867aed",
    "terminal.ansiBrightCyan": "#cdab53",
    "terminal.ansiBrightGreen": "#29e620",
    "terminal.ansiBrightMagenta": "#a05eee",
    "terminal.ansiBrightRed": "#ff6388",
    "terminal.ansiBrightWhite": "#bfa3ff",
    "terminal.ansiBrightYellow": "#f08161"
  },
  "workbench.startupEditor": "none",
  "workbench.colorTheme": "dark-plus-syntax",
  "workbench.iconTheme": "material-icon-theme",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "diffEditor.ignoreTrimWhitespace": true, // 差异编辑器将忽略前导空格或尾随空格中的更改。
  "files.autoSave": "onFocusChange", // 自动保存
  // 编辑器配置
  "editor.lineHeight": 24,
  "editor.renderLineHighlight": "gutter",
  "editor.renderWhitespace": "none",
  "editor.fontFamily": "Monaco",
  "editor.fontSize": 14,
  "editor.cursorBlinking": "smooth",
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.formatOnType": false,
  // 为了符合eslint的两个空格间隔原则
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  // 自动补全括号
  "editor.autoClosingBrackets": "always",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // 是否允许自定义的snippet片段提示
  "editor.snippetSuggestions": "top",
  "editor.formatOnPaste": false,
  // 启用后,将在保存文件时剪裁尾随空格。
  "files.trimTrailingWhitespace": true,
  // VScode 文件搜索区域配置
  "search.exclude": {
    "**/dist": true,
    "**/build": true,
    "**/elehukouben": true,
    "**/.git": true,
    "**/.gitignore": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true,
    "**/node_modules": true,
  },
  // 排除文件搜索区域,比如node_modules
  "files.exclude": {
    "**/.idea": true,
    "**/yarn.lock": true,
    "**/tmp": true
  },
  // 配置文件关联
  "files.associations": {
    "*.vue": "vue",
    "*.wxss": "css"
  },
  // 配置emmet是否启用tab展开缩写
  "emmet.triggerExpansionOnTab": true,
  // 配置emmet对文件类型的支持
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    "javascript": "javascriptreact",
    "xml": {
      "attr_quotes": "single"
    }
  },
  // 在react的jsx中添加对emmet的支持
  "emmet.includeLanguages": {
    "jsx-sublime-babel-tags": "javascriptreact"
  },
  // 是否开启eslint检测
  "eslint.enable": true,
  "eslint.alwaysShowStatus": true,
  // 文件保存时,是否自动根据eslint进行格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // eslint配置文件
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
    // {
    //   "language": "vue",
    //   "autoFix": true
    // },
  ],
  // 配置gitlen中git提交历史记录的信息显示情况
  "gitlens.advanced.messages": {
    "suppressFileNotUnderSourceControlWarning": true,
    "suppressShowKeyBindingsNotice": true,
    "suppressUpdateNotice": true
  },
  // git是否启用自动拉取
  "git.autofetch": true,
  "git.ignoreMissingGitWarning": true,
  "gitlens.gitCommands.closeOnFocusOut": true,
  "git.enableSmartCommit": true,
  // vetur插件配置
  //.vue文件template格式化支持,并使用js-beautify-html插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.options.tabSize": 2,
  // "vetur.format.options.useTabs": true,
  "vetur.format.defaultFormatterOptions": {
    "wrap_attributes": "force-aligned",
    "js-beautify-html": {
      // #vue组件中html代码格式化样式
      "wrap_attributes": "auto",
      "wrap_line_length": 125,
      "end_with_newline": false,
      "semi": true,
      "singleQuote": true,
    },
    "prettier": {
      "semi": true, // 是否在每行末尾添加分号
      "singleQuote": true //用单引号
    }
  },
  // 格式化快捷键 shirt+alt+F
  // 如果为true,将使用单引号而不是双引号
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // stylus配置
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
  "html.format.wrapAttributes": "force-aligned",

  "liveServer.settings.donotVerifyTags": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "window.zoomLevel": 0,
  "editor.largeFileOptimizations": false,
  "files.autoGuessEncoding": true,
  "gitlens.views.fileHistory.enabled": true,
  "gitlens.views.lineHistory.enabled": true,
  "editor.suggestSelection": "first",
  "powermode.enabled": true,
  "powermode.enableShake": false, //  power mode 不要晃动
  "docthis.includeDescriptionTag": true,
  "docthis.inferTypesFromNames": true,
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
}
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值