vscode插件

483 阅读2分钟

Auto Rename Tag

自动更新相对应的开始标签或结束标签的标签名

Babel ES6/ES7

可实现在jsx语法快捷键'cttl+/'实现多行复制

Bracket Pair Colorizer 2

给代码的{}增加不同彩色,便于区分不同行代码

Chinese (Simplified) Language Pack for Visual Studio Code

vscode汉化

Code Runner

在js文件中,可以对选中的代码右键点击'Run code'执行运行

Dracula Official

主题

ESLint

代码规范

indent-rainbow

可以使代码换行对齐更加具有可读性

Live Server

对html文件,右键点'Open with Live Server'实现本地服务地方式启动文件

markdownlint

可实现对maekdown文件,右键点击'打开预览'在编辑器中查看效果

open in browser

配置默认浏览器打开文件

Power Mode

可设置编辑器上光标效果

Prettier - Code formatter

格式化你的代码,是代码更加美观

Simple React Snippets

开发react插件

Sublime Text Keymap and Settings Importer

代码超长时,右上键有快速拖动代码功能

vscode-icons

项目Icon集合,是项目在编辑上目录及文件加上icon更加美化

Vetur

开发vue插件

CSS Peek

可实现按住ctrl键再鼠标移至CSS的id或则class上,来查看其样式属性

Import Cost

导入库时,可查看包的大小

Settings Sync

同步vscode所有配置

settings.json文件配置

{
  "editor.fontSize": 16,
  "editor.tabSize": 2,
  "open-in-browser.default": "chrome",
  "search.followSymlinks": false,
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // #每次保存的时候将代码按eslint格式进行修复
  "eslint.run": "onSave",
  //  #使用带引号替代双引号 
  "prettier.singleQuote": true,

  "prettier.semi": false,
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // #vue组件中html代码格式化样式
      "wrap_attributes": "force-aligned"
    }
  },
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "files.eol": "\n",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "files.autoSave": "off",
  "files.associations": {
    "*.vue": "vue"
  },
  "eslint.options": {
    "extensions": [
      ".js",
      ".ts",
      ".tsx",
      ".vue",
      ".jsx",
      ".dart"
    ]
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/dist": true
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "vue": "html",
    "vue-html": "html"
  },


  "git.confirmSync": false,
  "editor.cursorBlinking": "smooth",
  "editor.minimap.enabled": true,
  "editor.minimap.renderCharacters": false,
  "editor.codeLens": true,
  "editor.snippetSuggestions": "top",
  "editor.renderIndentGuides": false,
  "code-runner.runInTerminal": true,
  "code-runner.defaultLanguage": "JS",
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/tmp": true,
    // "**/node_modules": true,
    "**/bower_components": true,
    // "**/dist": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/tmp/**": true,
    "**/bower_components/**": true,
    "**/dist/**": true
  },

  "prettier.disableLanguages": [],
  "editor.renderWhitespace": "boundary",
  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "dart.debugExternalLibraries": true,
  "dart.debugSdkLibraries": true,
  "dart.enableCompletionCommitCharacters": true,
  "dart.flutterHotRestartOnSave": true,
  "dart.lineLength": 120,
  "dart.previewFlutterUiGuides": true,
  "dart.triggerSignatureHelpAutomatically": true,
  "dart.flutterSdkPath": "/Users/xucongmac/code/flutter",

  "workbench.iconTheme": "vscode-icons",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "workbench.colorTheme": "Dracula",
  "explorer.confirmDragAndDrop": false,
  "window.zoomLevel": 0,

  // Live Server以服务器方式打开文件
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.NoBrowser": true,
  "liveServer.settings.donotVerifyTags": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.AdvanceCustomBrowserCmdLine": "",
  "liveServer.settings.host": "127.0.0.1",
  "liveServer.settings.port": 5500,

  // prettier格式化代码工具配置
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[yaml]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.implicitProjectConfig.experimentalDecorators": true,

  //powser mode书写代码时特效
  "powermode.enabled": true,       
  // 火焰
  // "powermode.presets": "flames",  
  // 爆炸
  "powermode.presets": "simple-rift",
  // 粒子
  // "powermode.presets": "particles",
  // 烟花
  // "powermode.presets": "fireworks",
  // 时间间隔
  "powermode.comboTimeout": 0,
  "explorer.confirmDelete": false,
  // 随字体颜色变化
  // "powermode.backgroundMode": "mask",
}