我的 VS Code 常用配置

November 27, 2023 · 3330 words · 7 min · Extensions vscode alias and tsconfig

我安装的 VS Code 插件 (Extensions)

快捷键

ctrl f:搜索
ctrl g:定位到某行
F12:跳转到函数定义
ctrl - #回到定义

alt + ↑ 向上移动一行;
alt + ↓ 向下移动一行

ctrl `: 打开内置shell
Shift + Alt +A 块区域注释
ctrl shift k:删除当前行
tab:填入自动补全内容

配置

// 出现推荐值时,按下Tab键是否自动填入最佳推荐值
"editor.tabCompletion": "on",

常规类

vscode-fileheader、
Auto Close Tag、
Auto Rename Tag 、
CSSComb、
Prettier 、
CSSRem (px to rem & rpx & vw )、
Remove Comments、
Live Server、
Color Highlight 、
GitLens 代码编辑历史、
Git History  历史记录并搜索提交、消息、分支、
Import Cost(查看导入包的大小)、
CSS PEEK(类名与样式关联)、
Colorize  可视化 CSS 颜色
indent-rainbow(代码缩进高亮)、

纠正类

AutoCorrect   用于「自动纠正」或「检查并建议」文案 、给 CJK(中文、日语、韩语)与英文混写的场景,补充正确的空格,同时尝试以安全的方式自动纠正标点符号
Code Spell Checker(检测单词错误)、
Bracket Pair Colorizer  括号高亮配对
Error Lens
VSCode React Refactor (提取成函数)

工具类

Turbo Console Log  无需手动添加日志。通过单击一个按钮添加控制台日志、
Remove Comments  删除代码中的所有注释。
Regex Previewer、
CodeSnap(生成代码选中图片 Take beautiful screenshots of your code in VS Code!)、
Markdown Preview Enhanced、
Material  icons 、
File Nesting Updater、
Better Comments  (Comment Highlighting)
Svg Preview、
Excel Viewer、
filesize、
Open in Browser、
toggle-upper-case、

主动提示

Path Intellisense、
TODO Highlight、
ES7+ React/Redux/React-Native snippets  (语法提示)
cssModules、
Parameter Hints( 入参格式提示 )、
Quokka.js

AI 类工具

> Tabnine 、
> GitHub Copilot、
> Codeium 、
> Time Master 分析编程时间

主题 (Theme)

> Monokai Pro(注册 key 输入 email 地址为 id@chinapyg.com,enter 后,再输入 key:  d055c-36b72-151ce-350f4-a8f69)、
> Peacock 打开多个 VS Code 实例显示不同颜色

JSON Settings

/*
* @Author: ASCII-ART
* @Date: 2017-10-26 14:04:17
 * @Last Modified by: markyun
 * @Last Modified time: 2024-09-26 16:52:59
*/

{

  "editor.multiCursorModifier": "ctrlCmd",
  "editor.snippetSuggestions": "top",
  "git.ignoreMissingGitWarning": true,
  "editor.fontSize": 16,
  "editor.tabSize": 2,
  "editor.rulers": [120],
  "git.ignoreLegacyWarning": true,
  "editor.minimap.enabled": true,
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // "editor.snippetSuggestions": "top",
  // "editor.quickSuggestions": false,
  "workbench.startupEditor": "newUntitledFile",
  "files.associations": {
    "*.js": "javascriptreact",
    "*.ts": "typescript",
    "*.tsx": "typescriptreact",
    "*.vue": "vue",
    "*.jsx": "javascriptreact"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }, // By default, create file  username
  "beautify.language": {
    "js": {
      "type": ["javascript", "json"],
      "filename": [".jshintrc", ".jsbeautify"]
    },
    "css": ["css", "scss", "less"],
    "html": ["htm", "html"]
  },
  "editor.renderWhitespace": "none",
  "workbench.statusBar.feedback.visible": false,
  "fileheader.Author": "markyun",
  // By default, update file  username.
  "fileheader.LastModifiedBy": "markyun",
  // Controls the line height. Use 0 to compute the lineHeight from the fontSize.
  "editor.lineHeight": 22,
  // 以像素为单位控制字符间距。
  "editor.letterSpacing": 0.25,
  // Enables font ligatures
  "editor.fontLigatures": true,
  "extensions.autoUpdate": false,
  // 控制编辑器是否在滚动时使用动画
  "editor.smoothScrolling": true,
  // 控制选取范围是否有圆角
  "editor.roundedSelection": false,
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#272727",
    "activityBar.background": "#272727",
    "tab.activeForeground": "#20fd84",
    "editorLineNumber.activeForeground": "#fdfdfd",
    "editorLineNumber.foreground": "#5c5c5c",
    "editor.selectionBackground": "#cbec0e65",
    "sideBar.border": "#464545",
    "settings.modifiedItemForeground": "#48ff00",
    "scrollbarSlider.hoverBackground": "#9e9898",
    "statusBar.background": "#242222",
    "statusBar.noFolderBackground": "#18181b",
    "statusBar.debuggingBackground": "#511f1f"
  },
  "workbench.commandPalette.history": 30,
  "workbench.commandPalette.preserveInput": true,
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "window.restoreWindows": "all",
  // 配置内置 HTML 语言支持是否建议 Angular V1 标记和属性。
  "html.suggest.angular1": false,
  "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
  "sync.gist": "xxxx", // GitHub Token xxx
    "sync.host": "",
    "sync.pathPrefix": "",
    "sync.quietSync": false,
    "sync.askGistName": false,
    "sync.removeExtensions": true,
    "sync.syncExtensions": true,
    "sync.autoDownload": false,
    "sync.autoUpload": false,
    "sync.lastUpload": "2019-10-16T10:59:52.376Z",
    "sync.lastDownload": "",
    "sync.forceDownload": false,
    "materialTheme.fixIconsRunning": false,
    "editor.wordWrap": "on",
    "editor.minimap.renderCharacters": true,
    "editor.minimap.showSlider": "always",
    "editor.renderLineHighlight": "line",
    "editor.tabCompletion": "on",
    "workbench.editor.labelFormat": "default",
    "workbench.editor.swipeToNavigate": false,
    "workbench.fontAliasing": "auto",
    "files.trimTrailingWhitespace": true,
    "update.mode": "none",
    "update.enableWindowsBackgroundUpdates": false,
    "css.lint.zeroUnits": "warning",
    "less.lint.importStatement": "warning",
    "less.lint.zeroUnits": "warning",
    "npm.enableScriptExplorer": true,
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "[graphql]": {},
    "scss.lint.zeroUnits": "warning",
    "terminal.integrated.rendererType": "dom",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "explorer.confirmDelete": false,
    "search.followSymlinks": false,
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true
    },
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/tmp": true,
        // "**/node_modules": true,
        "**/bower_components": true,
        "**/build": false,
        "**/dist": false
    },
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/**": true,
        "**/tmp/**": true,
        "**/bower_components/**": true,
        "**/dist/**": true
    },
    "search.useIgnoreFiles": false,
    "gitlens.advanced.messages": {
        "suppressGitMissingWarning": true,
        "suppressShowKeyBindingsNotice": true
    },
    "colorize.ignore_search_variables_info": true,
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "explorer.confirmDragAndDrop": false,
    "vscode_vibrancy.opacity": 0.5,
    "vscode_vibrancy.theme": "Default Dark",
    "telemetry.enableCrashReporter": false,
    "telemetry.enableTelemetry": false,
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "vscode.css-language-features"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "extensions.ignoreRecommendations": true,
    "tabnine.experimentalAutoImports": true,
    "security.workspace.trust.untrustedFiles": "open",
    "php.validate.enable": false,
    "javascript.validate.enable": true,
    "typescript.validate.enable": false,
    "bracket-pair-colorizer-2.depreciation-notice": false,
    "docwriter.custom.author": "M.Jyun",
    "docwriter.language": "Chinese",
    "prettier.printWidth": 100,
    "prettier.tabWidth": 4,
    "sync.gist": "xxx",
    "sync.quietSync": true,
    "suppressLineUncommittedWarning": true,
    "files.autoGuessEncoding": true,
    "csscomb.preset": "zen",
    "csscomb.ignoreFilesOnSave": [],
    "csscomb.lines-between-rulesets": 0,
    "codetime.statusBarInfo": "total",
    "terminal.integrated.sendKeybindingsToShell": true,
    "workbench.enableExperiments": false,
    "update.showReleaseNotes": false,
    "[typescriptreact]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.foldingMaximumRegions": 2500,
    "git.autorefresh": false,
    "git.autoRepositoryDetection": false,
    "git.enabled": true,
    "editor.fontFamily": "Monaco, 'Courier New', monospace,Menlo",
    "gitlens.terminalLinks.enabled": false,
    "gitlens.advanced.repositorySearchDepth": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "html.format.enable": false,
    "javascript.format.enable": false,
    "prettier.embeddedLanguageFormatting": "off",
    "json.format.enable": false,
    "workbench.iconTheme": "Monokai Pro (Filter Spectrum) Icons",
    "editor.comments.ignoreEmptyLines": false,
    "deepl.apiKey": null,
    "terminal.integrated.enableMultiLinePasteWarning": false,
    "EnglishChineseDictionary.enableHover": true,
    "translateSpeaker.mode": "autoEnglish",
    "vscodeGoogleTranslate.preferredLanguage": "Chinese (Simplified)",
    "workbench.productIconTheme": "material-product-icons",
    "window.zoomLevel": 1,
    "explorer.fileNesting.enabled": true,
    "explorer.fileNesting.expand": false,
    "explorer.fileNesting.patterns": {
        "//": "Last update at 2023/7/4 17:20:03",
        "*.asax": "$(capture).*.cs, $(capture).*.vb",
        "*.ascx": "$(capture).*.cs, $(capture).*.vb",
        "*.ashx": "$(capture).*.cs, $(capture).*.vb",
        "*.aspx": "$(capture).*.cs, $(capture).*.vb",
        "*.bloc.dart": "$(capture).event.dart, $(capture).state.dart",
        "*.c": "$(capture).h",
        "*.cc": "$(capture).hpp, $(capture).h, $(capture).hxx",
        "*.cjs": "$(capture).cjs.map, $(capture).*.cjs, $(capture)_*.cjs",
        "*.component.ts": "$(capture).component.html, $(capture).component.spec.ts, $(capture).component.css, $(capture).component.scss, $(capture).component.sass, $(capture).component.less",
        "*.cpp": "$(capture).hpp, $(capture).h, $(capture).hxx",
        "*.cs": "$(capture).*.cs",
        "*.cshtml": "$(capture).cshtml.cs",
        "*.csproj": "*.config, *proj.user, appsettings.*, bundleconfig.json",
        "*.css": "$(capture).css.map, $(capture).*.css",
        "*.cxx": "$(capture).hpp, $(capture).h, $(capture).hxx",
        "*.dart": "$(capture).freezed.dart, $(capture).g.dart",
        "*.ex": "$(capture).html.eex, $(capture).html.heex, $(capture).html.leex",
        "*.go": "$(capture)_test.go",
        "*.java": "$(capture).class",
        "*.js": "$(capture).js.map, $(capture).*.js, $(capture)_*.js",
        "*.jsx": "$(capture).js, $(capture).*.jsx, $(capture)_*.js, $(capture)_*.jsx",
        "*.master": "$(capture).*.cs, $(capture).*.vb",
        "*.mjs": "$(capture).mjs.map, $(capture).*.mjs, $(capture)_*.mjs",
        "*.module.ts": "$(capture).resolver.ts, $(capture).controller.ts, $(capture).service.ts",
        "*.mts": "$(capture).mts.map, $(capture).*.mts, $(capture)_*.mts",
        "*.pubxml": "$(capture).pubxml.user",
        "*.resx": "$(capture).*.resx, $(capture).designer.cs, $(capture).designer.vb",
        "*.tex": "$(capture).acn, $(capture).acr, $(capture).alg, $(capture).aux, $(capture).bbl, $(capture).blg, $(capture).fdb_latexmk, $(capture).fls, $(capture).glg, $(capture).glo, $(capture).gls, $(capture).idx, $(capture).ind, $(capture).ist, $(capture).lof, $(capture).log, $(capture).lot, $(capture).out, $(capture).pdf, $(capture).synctex.gz, $(capture).toc, $(capture).xdv",
        "*.ts": "$(capture).js, $(capture).d.ts.map, $(capture).*.ts, $(capture)_*.js, $(capture)_*.ts",
        "*.tsx": "$(capture).ts, $(capture).*.tsx, $(capture)_*.ts, $(capture)_*.tsx",
        "*.vbproj": "*.config, *proj.user, appsettings.*, bundleconfig.json",
        "*.vue": "$(capture).*.ts, $(capture).*.js, $(capture).story.vue",
        "*.xaml": "$(capture).xaml.cs",
        "+layout.svelte": "+layout.ts,+layout.ts,+layout.js,+layout.server.ts,+layout.server.js,+layout.gql",
        "+page.svelte": "+page.server.ts,+page.server.js,+page.ts,+page.js,+page.gql",
        ".clang-tidy": ".clang-format, .clangd, compile_commands.json",
        ".env": "*.env, .env.*, .envrc, env.d.ts",
        ".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*",
        ".project": ".classpath",
        "BUILD.bazel": "*.bzl, *.bazel, *.bazelrc, bazel.rc, .bazelignore, .bazelproject, WORKSPACE",
        "CMakeLists.txt": "*.cmake, *.cmake.in, .cmake-format.yaml, CMakePresets.json",
        "I*.cs": "$(capture).cs",
        "Pipfile": ".editorconfig, .flake8, .isort.cfg, .python-version, Pipfile, Pipfile.lock, requirements*.in, requirements*.pip, requirements*.txt, tox.ini",
        "artisan": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, server.php, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, webpack.config.*, webpack.mix.js, windi.config.*",
        "astro.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
        "cargo.toml": ".clippy.toml, .rustfmt.toml, cargo.lock, clippy.toml, cross.toml, rust-toolchain.toml, rustfmt.toml",
        "composer.json": ".php*.cache, composer.lock, phpunit.xml*, psalm*.xml",
        "default.nix": "shell.nix",
        "deno.json*": "*.env, .env.*, .envrc, api-extractor.json, deno.lock, env.d.ts, import-map.json, import_map.json, jsconfig.*, tsconfig.*, tsdoc.*",
        "dockerfile": ".dockerignore, docker-compose.*, dockerfile*",
        "flake.nix": "flake.lock",
        "gatsby-config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, gatsby-browser.*, gatsby-node.*, gatsby-ssr.*, gatsby-transformer.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
        "gemfile": ".ruby-version, gemfile.lock",
        "go.mod": ".air*, go.sum",
        "go.work": "go.work.sum",
        "hatch.toml": ".editorconfig, .flake8, .isort.cfg, .python-version, hatch.toml, requirements*.in, requirements*.pip, requirements*.txt, tox.ini",
        "mix.exs": ".credo.exs, .dialyzer_ignore.exs, .formatter.exs, .iex.exs, .tool-versions, mix.lock",
        "next.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, next-env.d.ts, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
        "nuxt.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .nuxtignore, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
        "package.json": ".browserslist*, .circleci*, .commitlint*, .cz-config.js, .czrc, .dlint.json, .dprint.json, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitpod*, .huskyrc*, .jslint*, .lintstagedrc*, .markdownlint*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .releaserc*, .sentry*, .simple-git-hooks*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .versionrc*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, Procfile, apollo.config.*, appveyor*, azure-pipelines*, bower.json, build.config.*, commitlint*, crowdin*, dangerfile*, dlint.json, dprint.json, electron-builder.*, eslint*, firebase.json, grunt*, gulp*, jenkins*, lerna*, lint-staged*, nest-cli.*, netlify*, nodemon*, npm-shrinkwrap.json, nx.*, package-lock.json, package.nls*.json, phpcs.xml, pm2.*, pnpm*, prettier*, pullapprove*, pyrightconfig.json, release-tasks.sh, release.config.*, renovate*, rollup.config.*, rspack*, simple-git-hooks*, stylelint*, tslint*, tsup.config.*, turbo*, typedoc*, unlighthouse*, vercel*, vetur.config.*, webpack*, workspace.json, xo.config.*, yarn*",
        "pubspec.yaml": ".metadata, .packages, all_lint_rules.yaml, analysis_options.yaml, build.yaml, pubspec.lock, pubspec_overrides.yaml",
        "pyproject.toml": ".editorconfig, .flake8, .isort.cfg, .pdm-python, .pdm.toml, .python-version, MANIFEST.in, Pipfile, Pipfile.lock, hatch.toml, pdm.lock, poetry.lock, pyproject.toml, requirements*.in, requirements*.pip, requirements*.txt, setup.cfg, setup.py, tox.ini",
        "quasar.conf.js": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, quasar.extensions.json, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
        "readme*": "authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying, credits, governance.md, history.md, license*, maintainers, readme*, security.md, sponsors*",
        "remix.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, remix.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
        "requirements.txt": ".editorconfig, .flake8, .isort.cfg, .python-version, requirements*.in, requirements*.pip, requirements*.txt, tox.ini",
        "rush.json": ".browserslist*, .circleci*, .commitlint*, .cz-config.js, .czrc, .dlint.json, .dprint.json, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitpod*, .huskyrc*, .jslint*, .lintstagedrc*, .markdownlint*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .releaserc*, .sentry*, .simple-git-hooks*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .versionrc*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, Procfile, apollo.config.*, appveyor*, azure-pipelines*, bower.json, build.config.*, commitlint*, crowdin*, dangerfile*, dlint.json, dprint.json, electron-builder.*, eslint*, firebase.json, grunt*, gulp*, jenkins*, lerna*, lint-staged*, nest-cli.*, netlify*, nodemon*, npm-shrinkwrap.json, nx.*, package-lock.json, package.nls*.json, phpcs.xml, pm2.*, pnpm*, prettier*, pullapprove*, pyrightconfig.json, release-tasks.sh, release.config.*, renovate*, rollup.config.*, rspack*, simple-git-hooks*, stylelint*, tslint*, tsup.config.*, turbo*, typedoc*, unlighthouse*, vercel*, vetur.config.*, webpack*, workspace.json, xo.config.*, yarn*",
        "setup.cfg": ".editorconfig, .flake8, .isort.cfg, .python-version, MANIFEST.in, requirements*.in, requirements*.pip, requirements*.txt, setup.cfg, tox.ini",
        "setup.py": ".editorconfig, .flake8, .isort.cfg, .python-version, MANIFEST.in, requirements*.in, requirements*.pip, requirements*.txt, setup.cfg, setup.py, tox.ini",
        "shims.d.ts": "*.d.ts",
        "svelte.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, houdini.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, mdsvex.config.js, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vite.config.*, vitest.config.*, webpack.config.*, windi.config.*",
        "vite.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
        "vue.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .envrc, .htmlnanorc*, .lighthouserc.*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, contentlayer.config.*, cssnano.config.*, cypress.*, env.d.ts, formkit.config.*, formulate.config.*, histoire.config.*, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, lighthouserc.*, playwright.config.*, postcss.config.*, puppeteer.config.*, rspack.config.*, svgo.config.*, tailwind.config.*, tsconfig.*, tsdoc.*, uno.config.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*"
    },
    "workbench.colorTheme": "Monokai Pro (Filter Spectrum)",
    "cSpell.customDictionaries": {},
    "cSpell.dictionaryDefinitions": [],
    "cSpell.ignorePaths": [
        "package-lock.json",
        "node_modules",
        "vscode-extension",
        ".git/objects",
        ".vscode",
        ".vscode-insiders",
        ".umi"
    ],
    "totalTypeScript.hideAllTips": true,
    "totalTypeScript.hideBasicTips": true,
    "editor.experimental.stickyScroll.enabled": true,
    "editor.unicodeHighlight.ambiguousCharacters": false,
    "cssrem.vwDesign": 375,
    "[less]": {
        "editor.defaultFormatter": "vscode.css-language-features"
    },
    // 每组规则后加一个空行

    // 完全开启/关闭 AutoCorrect,默认:true
    "autocorrect.enable": true,
    // 开启/关闭 AutoCorrect Lint 检查,默认:true
    "autocorrect.enableLint": true,
    // 是否启用 formatOnSave,默认:true
    "autocorrect.formatOnSave": false
}

使用 alias 别名实现,代码编译和代码跳转(alias and tsconfig)

此问题可以当做面试题:【vscode 通过配置 alias 实现 代码编译和代码跳转,但是 webpack alias 和 tsconfig path 之间是什么关系】

在 VS Code 中开发 React + TypeScript 项目时,为了方便文件引入,常常是配置 alias 来简化路径,让组件的引入可以使用别名。 如下示例,通过 @ 符号,编辑器就应该知道是从 src/ 这个路径去找 components 到这个文件。

import IconFont from '@/components/IconFont';
import Menus from '@/components/Menus';
import { Sortable } from './Dndkit/Sortable';

export { IconFont, Menus, Sortable };

想实现设置 alias 后,就能在编辑器中正确编译和点击跳转,其实只需要两处配置:

webpack.resolve 和 tsconfig.json 路径映射的关系

其中 tsconfig.json 中的 paths 主要用于告诉 TypeScript 编译器如何解析模块导入的路径。

而 webpack.resolve.alias 则用于告诉 webpack 构建过程中如何解析模块导入的路径。

这两者的分别配合,确保在开发过程中和构建过程中都能正确地解析模块导入的路径,从而实现代码编译和代码跳转的成功使用。

1、项目根目录 需要有 tsconfig.json 配置文件,它是用于告诉 TypeScript 编译器如何 解析代码中的模块导入的路径。

{
  "compilerOptions": {
    "baseUrl": "./src",
    "rootDir": ".",
    "module": "esnext",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "preserve",
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": false,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "paths": {
      "@/*": ["./*"],
      "@@/*": ["/src/.umi/*"],
      "fishx": [".fishx/moduleEntry"],
      "@utils/*": ["utils/*"],
      "@assets/*": ["assets/*"],
      "@services/*": ["services/*"],
      "@stores/*": ["stores/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@config/*": ["config/*"],
      "@pages/*": ["pages/*"],
      "@models/*": ["models/*"],
      "@hooks/*": ["hooks/*"]
    }
  },
  "include": ["src"],

  "exclude": [
    "node_modules",
    "lib",
    "es",
    "dist",
    "typings",
    "**/__test__",
    "test",
    "docs",
    "tests"
  ]
}

2、webpack.resolve.alias 配置【给编译用的】

resolve: {
    extensions: ['.tsx', 'ts', '.js', '.json'],
    alias: {
      '@src': resolve('./src'),
    },
  },

最后,如果插件编辑器的语言状态,都成功加载了对应的配置,就能正常工作了。 image.png

使用 .gitignore_global 忽略 .vscode 文件夹

用于 Git 的全局忽略配置文件名为 .gitignore_global,它存放在用户主目录下(例如:C:\Users\name 名 或 /Users/name)。要启用全局忽略功能,我们需要进行一些配置。

首先,打开命令行工具或终端,使用以下命令告诉 Git 要使用全局忽略文件:

git config --global core.excludesfile ~/.gitignore_global

这条命令告诉 Git 在用户主目录下使用.gitignore_global 文件作为全局忽略文件。 全局忽略文件只针对未被纳入版本控制的文件起作用。在已经提交到版本控制的文件中,Git 会遵循.gitignore 文件的规则。所以,在使用全局忽略文件时,我们需要注意已经添加到版本控制的文件。

# 忽略所有的日志文件
*.log

# dependencies
/node_modules
.yarn
/npm-debug.log*
/yarn-error.log
/yarn.lock
/package-lock.json

# production
/dist

# misc
.DS_Store

# 忽略所有的临时文件
*.tmp

# 忽略所有的编译产生的文件
*.o
*.exe

# 忽略IDE和编辑器产生的文件
.vscode/
.idea/
*.sublime-project
*.sublime-workspace

# 忽略项目根目录下的build目录
/build

# 忽略src目录下的所有pdf文件
/src/**/*.pdf

内置终端

可以快速了解当前环境变量,在终端中运行 printenv。

printenv

image.png