学习笔记

Appearance

我的 VSCode 常用插件

Vue插件 ​

  • Vetur 是一款为 Vue2 编写的语法高亮、自动完成、格式化、错误检查等功能的插件。注意，次此插件与 Vue Language Features (Volar) 存在冲突，不能同时启用，如果是 Vue2 项目时建议禁用 Vue Language Features (Volar)
  • Vue VSCode Snippets 是一款快速生成 Vue 代码片段的插件，支持 Vue2 和 Vue3
  • Vue - Official，Vue官方插件，提供语法高亮、自动完成、格式化、错误检查等功能

uni-app插件 ​

  • uni-create-view 此插件可以快捷创建 uni-app 页面并添加到 pages.json，也可以快速创建 uni-app 组件
  • uni-helper 是一款增强 uni-app 系列产品在 VSCode 内的开发体验的插件，此插件其实是以下五个插件的扩展包

React插件 ​

ReactNative插件 ​

  • React Native Tools 微软官方专门为 RN 在 VSCode 在中进行调试而开发的插件
  • Expo Tools RN 的社区版脚手架create-expo-app在 VSCode 中的官方插件

CSS插件 ​

HTML插件 ​

JS/TS插件 ​

Flutter插件 ​

PHP插件 ​

Git插件 ​

Markdown插件 ​

代码检查 ​

辅助开发工具 ​

数据填充 ​

  • Lorem ipsum 快速生成假文，由于 VSCode 内置的假文功能只支持 HTML 文件，而此插件可以用于各种文件
  • vscode-faker 快速生成用例数据

运维 ​

外观和色彩 ​

其他 ​

我的VSCode用户配置 ​

查看
json
{
  // ========== 外观配置 ==========
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  "editor.guides.bracketPairs": "active",
  "editor.lineNumbers": "interval",
  "editor.renderWhitespace": "boundary",
  "window.autoDetectColorScheme": true,
  "window.dialogStyle": "custom",
  "window.nativeTabs": true, // this is great, macOS only
  "window.title": "${rootName}", // this make tabs more readable
  "workbench.colorTheme": "Dracula",
  "workbench.colorCustomizations": {
    "editorIndentGuide.activeBackground1": "#ff0000"
  },
  "workbench.editor.tabActionLocation": "left",
  "workbench.fontAliasing": "antialiased",
  "workbench.iconTheme": "catppuccin-mocha",
  "workbench.list.smoothScrolling": true,
  "workbench.preferredDarkColorTheme": "Dracula",
  "workbench.preferredLightColorTheme": "Dracula Soft",
  "workbench.sideBar.location": "right",
  "workbench.startupEditor": "newUntitledFile",
  "workbench.tree.indent": 10,

  // ========== 编辑器配置 ==========
  "css.validate": false,
  "css.lint.hexColorLength": "ignore",
  "css.lint.unknownAtRules": "ignore",
  "less.validate": false,
  "less.lint.unknownAtRules": "ignore",
  "scss.validate": false,
  "scss.lint.unknownAtRules": "ignore",
  "debug.onTaskErrors": "debugAnyway",
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
  "editor.find.addExtraSpaceOnTop": false,
  "editor.unicodeHighlight.invisibleCharacters": false,
  "editor.autoClosingBrackets": "always",
  "editor.cursorBlinking": "smooth",
  "editor.copyWithSyntaxHighlighting": false,
  "editor.linkedEditing": true,
  "editor.snippetSuggestions": "top",
  "editor.wordBasedSuggestions": "off",
  "editor.minimap.renderCharacters": false,
  "editor.minimap.maxColumn": 30,
  "editor.minimap.size": "fit",
  "editor.tabSize": 2,
  "editor.wordWrapColumn": 120,
  "editor.wordWrap": "bounded",
  "editor.quickSuggestions": {
    "strings": "on"
  },
  // 不要同时开启editor.formatOnSave和source.fixAll.eslint，这样会导致两次lint检查
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "extensions.ignoreRecommendations": true,
  "extensions.autoUpdate": "onlyEnabledExtensions",
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.simpleDialog.enable": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "git.untrackedChanges": "separate",
  "git.ignoreLimitWarning": true,
  "git.path": "D:/Develop/Git/bin/git.exe",
  "javascript.suggest.paths": false,
  "typescript.suggest.paths": false,
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  "typescript.tsdk": "./node_modules/typescript/lib",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "php.validate.executablePath": "D:/Develop/PHP74/php.exe",
  "php.suggest.basic": false,
  "python.pythonPath": "D:/Develop/Python/python.exe",
  "python.linting.enabled": false,
  "python.formatting.provider": "yapf",
  "python.linting.flake8Enabled": true,
  "python.linting.flake8Args": ["--max-line-length=248"],
  "scm.diffDecorationsGutterWidth": 2,
  "search.followSymlinks": false,
  "security.workspace.trust.untrustedFiles": "open",
  "terminal.external.windowsExec": "D:/Develop/Git/bin/bash.exe",
  "terminal.integrated.automationProfile.windows": {
    "path": "D:/Develop/Git/bin/bash.exe"
  },
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.fontWeight": "300",
  "terminal.integrated.defaultProfile.windows": "Git-Bash",
  "terminal.integrated.persistentSessionReviveProcess": "never",
  "terminal.integrated.profiles.windows": {
    "Git-Bash": {
      "path": "D:/Develop/Git/bin/bash.exe",
      "args": []
    }
  },
  "workbench.editor.closeOnFileDelete": true,
  "workbench.editor.highlightModifiedTabs": true,
  "workbench.editor.limit.enabled": true,
  "workbench.editor.limit.perEditorGroup": true,
  "workbench.editor.limit.value": 5,
  // VScode 文件搜索排除区域
  "search.exclude": {
    "**/*.snap": true,
    "**/*.svg": true,
    "**/.git": true,
    "**/.github": false,
    "**/.nuxt": true,
    "**/.umi": true,
    "**/.output": true,
    "**/.pnpm": true,
    "**/.vscode": true,
    "**/.yarn": true,
    "**/assets": true,
    "**/bower_components": true,
    "**/dist/**": true,
    "**/logs": true,
    "**/node_modules": true,
    "**/out/**": true,
    "**/package-lock.json": true,
    "**/pnpm-lock.yaml": true,
    "**/public": true,
    "**/temp": true,
    "**/yarn.lock": true,
    "**/CHANGELOG*": true,
    "**/LICENSE*": true
  },
  // 配置文件关联
  "files.associations": {
    "*.html": "html",
    "*.vue": "vue",
    "*.nvue": "vue",
    "*.css": "tailwindcss",
    "*.scss": "css",
    "*.sass": "css",
    "*.wxs": "javascript",
    "*.js": "javascript",
    "*.jsx": "javascriptreact",
    "*.php": "php",
    "*.json": "jsonc",
    "*.wxss": "css",
    "*.wxml": "wxml",
    "*.cjson": "jsonc"
  },
  // 隐藏一些碍眼的文件夹
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/tmp": true,
    "**/bower_components": true
  },
  // 排除掉一些不必要索引的大文件夹以减少内存和CPU消耗
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/**": true,
    "**/tmp/**": true,
    "**/bower_components/**": true,
    "**/dist/**": true
  },

  // ========== 插件配置 ==========
  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript",
    "javascriptreact",
    "typescriptreact"
  ],
  "Codegeex.Privacy": true,
  "code-runner.clearPreviousOutput": true,
  "code-runner.defaultLanguage": "javascript",
  "code-runner.runInTerminal": true,
  "code-runner.saveAllFilesBeforeRun": true,
  "code-runner.executorMap": {
    "javascript": "node",
    "typescript": "tsc $fileName && node $fileNameWithoutExt.js",
    "php": "php",
    "python": "D:/Develop/Python/python.exe"
  },
  "cSpell.allowCompoundWords": true,
  "cSpell.language": "en,en-US",
  "dart.hotReloadOnSave": "manual",
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.triggerExpansionOnTab": false,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "wxml": "html",
    "vue-html": "html"
  },
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html",
    "wxml": "html",
    "javascript": "jsx"
  },
  "errorLens.enabledDiagnosticLevels": ["warning", "error"],
  "errorLens.excludeBySource": ["cSpell", "Grammarly", "eslint"],
  // ESLint config: https://github.com/antfu/eslint-config
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.format.enable": false,
  "eslint.options": {
    "configFile": ".eslintrc",
    "extensions": [".html", ".vue", ".css", ".scss", ".js", ".ts", ".jsx", ".tsx"]
  },
  "eslint.quiet": true,
  // Silent the stylistic rules in you IDE, but still auto fix them
  "eslint.rules.customizations": [
    { "rule": "style/*", "severity": "off" },
    { "rule": "format/*", "severity": "off" },
    { "rule": "*-indent", "severity": "off" },
    { "rule": "*-spacing", "severity": "off" },
    { "rule": "*-spaces", "severity": "off" },
    { "rule": "*-order", "severity": "off" },
    { "rule": "*-dangle", "severity": "off" },
    { "rule": "*-newline", "severity": "off" },
    { "rule": "*quotes", "severity": "off" },
    { "rule": "*semi", "severity": "off" }
  ],
  "eslint.run": "onSave",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml"
  ],
  "githubIssues.workingIssueFormatScm": "#${issueNumberLabel}",
  "githubPullRequests.fileListLayout": "tree",
  "gitlens.codeLens.authors.enabled": false,
  "gitlens.codeLens.enabled": false,
  "gitlens.codeLens.recentChange.enabled": false,
  "gitlens.menus": {
    "editor": {
      "blame": false,
      "clipboard": true,
      "compare": true,
      "history": false,
      "remote": false
    },
    "editorGroup": {
      "blame": true,
      "compare": false
    },
    "editorTab": {
      "clipboard": true,
      "compare": true,
      "history": true,
      "remote": true
    },
    "explorer": {
      "clipboard": true,
      "compare": true,
      "history": true,
      "remote": true
    },
    "scm": {
      "authors": true
    },
    "scmGroup": {
      "compare": true,
      "openClose": true,
      "stash": true
    },
    "scmGroupInline": {
      "stash": true
    },
    "scmItem": {
      "clipboard": true,
      "compare": true,
      "history": true,
      "remote": false,
      "stash": true
    }
  },
  "html-css-class-completion.includeGlobPattern": "**/*.{css,scss,sass,less,html}",
  "html-css-class-completion.excludeGlobPattern": "**/node_modules/*.*",
  "i18n-ally.autoDetection": false,
  "i18n-ally.displayLanguage": "en",
  "i18n-ally.ignoredLocales": [],
  "iconify.annotations": true,
  "iconify.inplace": true,
  "liveServer.settings.donotVerifyTags": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.useWebExt": true,
  "minapp-vscode.disableAutoConfig": true,
  "prettier.printWidth": 200,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "react-native-tools.showUserTips": false,
  "stylelint.enable": true,
  "stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],
  "svg.preview.mode": "svg",
  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "ui"],
  "tailwindCSS.includeLanguages": {
    "plaintext": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)",
    ["tw.style\\(([^)]*)\\)", "'([^']*)'"],
    ["ui:\\s*{([^)]*)\\s*}", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["/\\*\\s?ui\\s?\\*/\\s*{([^;]*)}", ":\\s*[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "vue.server.hybridMode": false, // 解决vue的代码提示出现两次的问题

  // ========== 格式化关联配置 ==========
  "[css]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "Vue.volar"
  },
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[php]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  },
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "Dart-Code.dart-code",
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": "off"
  },
  "[prisma]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "Prisma.prisma"
  }
}

MIT License

Copyright © 2023-present welives