Vue FAQ

Русский

English

Русский

English

Appearance

Настройка IDE ​

Какой IDE выбрать?

Vue рекомендует Microsoft VS Code. Второй по популярности - WebStorm

В VS Code намного раньше появляются новые официальные расширения для Vue, и вообще эта среда очень удобна для разработки в целом, есть множество полезных расширений, - например, можно запустить GitHub Action и посмотреть его вывод прямо в редакторе.

WebStorm даёт больше возможностей по работе в js, html, но глючит с TypeScript и не только в SFC script setup, и вообще не очень успевает за изменениями во Vue.

Для начинающих однозначно VS Code

Необходимые расширения VS Code

При работе с Vite и Vue 3:

  • ESlint
  • Volar

Могут пригодиться:

  • Typescript Vue Plugin
  • Codeium
  • SFTP
  • GitHub Actions
Настройка VS Code

VS Code позволяет делать очень тонкую настройку. Например, попробуйте создать вот этот файл локальных настроек .vscode/setting.json и посмотрите как изменится редактор.

settings.json
json
{
    "editor.formatOnSave": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "typescript.tsdk": "node_modules/typescript/lib",
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "eslint.codeActionsOnSave.rules": null,
    "vue.codeActions.enabled": false,
    // Visuals
    "workbench.activityBar.visible": true,
    "workbench.colorTheme": "Default Dark Modern",
    "workbench.fontAliasing": "antialiased",
    "workbench.list.smoothScrolling": true,
    "workbench.tree.expandMode": "singleClick",
    "workbench.tree.indent": 10,
    "editor.fontFamily": "Fira Code, Input Mono, monospace",
    "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss06', 'zero'",
    // Editor
    "editor.accessibilitySupport": "off",
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.find.addExtraSpaceOnTop": false,
    "editor.guides.bracketPairs": "active",
    "editor.inlineSuggest.enabled": true,
    //   "editor.lineNumbers": "interval",
    // "editor.multiCursorModifier": "ctrlCmd",
    "editor.renderWhitespace": "boundary",
    "editor.suggestSelection": "first",
    "editor.tabSize": 2,
    "editor.unicodeHighlight.invisibleCharacters": false,
    "editor.stickyScroll.enabled": true,
    "editor.hover.sticky": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true, // this allows ESLint to auto fix on save
        "source.organizeImports": false
    },
    "editor.wordSeparators": "-`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
    // "explorer.confirmDelete": false,
    // "explorer.confirmDragAndDrop": false,
    "window.autoDetectColorScheme": false,
    "window.dialogStyle": "custom",
    "window.nativeTabs": true, // this is great, macOS only
    "window.titleBarStyle": "custom",
    "workbench.editor.closeOnFileDelete": true,
    "workbench.editor.highlightModifiedTabs": true,
    "workbench.editor.limit.enabled": true,
    "workbench.editor.limit.perEditorGroup": true,
    "workbench.editor.limit.value": 30,
    "extensions.autoUpdate": "onlyEnabledExtensions",
    "extensions.ignoreRecommendations": true,
    "files.eol": "\n",
    "files.insertFinalNewline": true,
    "files.simpleDialog.enable": true,
    "git.autofetch": false,
    "git.confirmSync": false,
    "git.enableSmartCommit": true,
    "git.untrackedChanges": "separate",
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.cursorStyle": "line",
    "terminal.integrated.fontWeight": "300",
    "terminal.integrated.persistentSessionReviveProcess": "never",
    "terminal.integrated.tabs.enabled": true,
    "scm.diffDecorationsGutterWidth": 2,
    "debug.onTaskErrors": "debugAnyway",
    "diffEditor.ignoreTrimWhitespace": false,
    "search.exclude": {
        "**/.git": true,
        "**/.github": true,
        "**/.nuxt": true,
        "**/.output": true,
        "**/.pnpm": true,
        "**/.vscode": true,
        "**/.yarn": true,
        "**/bower_components": true,
        "**/dist/**": true,
        "**/logs": true,
        "**/node_modules": true,
        "**/out/**": true,
        "**/package-lock.json": true,
        "**/pnpm-lock.yaml": true,
        "**/tmp": true,
        "**/yarn.lock": true
    },
    // Extension configs
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": false,
    // ESLint config: https://github.com/antfu/eslint-config
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "eslint.quiet": false,
    "eslint.validate": [
        "javascript",
        "typescript",
        "vue",
        "html",
        "markdown",
        "json",
        "jsonc",
        "json5"
    ],
    "cSpell.allowCompoundWords": true,
    "cSpell.language": "en,en-US,ru,ru-RU",
    "css.lint.hexColorLength": "ignore",
    "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
        }
    },
    "i18n-ally.autoDetection": false,
    "i18n-ally.displayLanguage": "en",
    "i18n-ally.ignoredLocales": [],
    "iconify.annotations": true,
    "iconify.inplace": true,
    "svg.preview.mode": "svg",
    // only use Prettier for manually formatting
    "prettier.enable": true,
    // "prettier.printWidth": 200,
    // "prettier.semi": false,
    // "prettier.singleQuote": true,
    "volar.autoCompleteRefs": false,
    "volar.codeLens.pugTools": false,
    "volar.completion.preferredTagNameCase": "pascal",
    // File Nesting
    // this might not be up to date with the repo, please check yourself
    // https://github.com/antfu/vscode-file-nesting-config
    "explorer.fileNesting.enabled": true,
    "explorer.fileNesting.expand": false,
    "explorer.fileNesting.patterns": {
        "*.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",
        "*.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",
        "//": "Last update at 4/29/2023, 2:04:58 PM",
        "BUILD.bazel": "*.bzl, *.bazel, *.bazelrc, bazel.rc, .bazelignore, .bazelproject, WORKSPACE",
        "CMakeLists.txt": "*.cmake, *.cmake.in, .cmake-format.yaml, CMakePresets.json",
        "I*.cs": "$(capture).cs",
        "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",
        "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*, .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, 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": ".pdm.toml, pdm.lock, pyproject.toml",
        "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.*",
        "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, 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*",
        "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.*"
    }
}
{
    "editor.formatOnSave": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "typescript.tsdk": "node_modules/typescript/lib",
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "eslint.codeActionsOnSave.rules": null,
    "vue.codeActions.enabled": false,
    // Visuals
    "workbench.activityBar.visible": true,
    "workbench.colorTheme": "Default Dark Modern",
    "workbench.fontAliasing": "antialiased",
    "workbench.list.smoothScrolling": true,
    "workbench.tree.expandMode": "singleClick",
    "workbench.tree.indent": 10,
    "editor.fontFamily": "Fira Code, Input Mono, monospace",
    "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss06', 'zero'",
    // Editor
    "editor.accessibilitySupport": "off",
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.find.addExtraSpaceOnTop": false,
    "editor.guides.bracketPairs": "active",
    "editor.inlineSuggest.enabled": true,
    //   "editor.lineNumbers": "interval",
    // "editor.multiCursorModifier": "ctrlCmd",
    "editor.renderWhitespace": "boundary",
    "editor.suggestSelection": "first",
    "editor.tabSize": 2,
    "editor.unicodeHighlight.invisibleCharacters": false,
    "editor.stickyScroll.enabled": true,
    "editor.hover.sticky": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": false,
        "source.fixAll.eslint": true, // this allows ESLint to auto fix on save
        "source.organizeImports": false
    },
    "editor.wordSeparators": "-`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",
    // "explorer.confirmDelete": false,
    // "explorer.confirmDragAndDrop": false,
    "window.autoDetectColorScheme": false,
    "window.dialogStyle": "custom",
    "window.nativeTabs": true, // this is great, macOS only
    "window.titleBarStyle": "custom",
    "workbench.editor.closeOnFileDelete": true,
    "workbench.editor.highlightModifiedTabs": true,
    "workbench.editor.limit.enabled": true,
    "workbench.editor.limit.perEditorGroup": true,
    "workbench.editor.limit.value": 30,
    "extensions.autoUpdate": "onlyEnabledExtensions",
    "extensions.ignoreRecommendations": true,
    "files.eol": "\n",
    "files.insertFinalNewline": true,
    "files.simpleDialog.enable": true,
    "git.autofetch": false,
    "git.confirmSync": false,
    "git.enableSmartCommit": true,
    "git.untrackedChanges": "separate",
    "terminal.integrated.cursorBlinking": true,
    "terminal.integrated.cursorStyle": "line",
    "terminal.integrated.fontWeight": "300",
    "terminal.integrated.persistentSessionReviveProcess": "never",
    "terminal.integrated.tabs.enabled": true,
    "scm.diffDecorationsGutterWidth": 2,
    "debug.onTaskErrors": "debugAnyway",
    "diffEditor.ignoreTrimWhitespace": false,
    "search.exclude": {
        "**/.git": true,
        "**/.github": true,
        "**/.nuxt": true,
        "**/.output": true,
        "**/.pnpm": true,
        "**/.vscode": true,
        "**/.yarn": true,
        "**/bower_components": true,
        "**/dist/**": true,
        "**/logs": true,
        "**/node_modules": true,
        "**/out/**": true,
        "**/package-lock.json": true,
        "**/pnpm-lock.yaml": true,
        "**/tmp": true,
        "**/yarn.lock": true
    },
    // Extension configs
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": false,
    // ESLint config: https://github.com/antfu/eslint-config
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "eslint.quiet": false,
    "eslint.validate": [
        "javascript",
        "typescript",
        "vue",
        "html",
        "markdown",
        "json",
        "jsonc",
        "json5"
    ],
    "cSpell.allowCompoundWords": true,
    "cSpell.language": "en,en-US,ru,ru-RU",
    "css.lint.hexColorLength": "ignore",
    "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
        }
    },
    "i18n-ally.autoDetection": false,
    "i18n-ally.displayLanguage": "en",
    "i18n-ally.ignoredLocales": [],
    "iconify.annotations": true,
    "iconify.inplace": true,
    "svg.preview.mode": "svg",
    // only use Prettier for manually formatting
    "prettier.enable": true,
    // "prettier.printWidth": 200,
    // "prettier.semi": false,
    // "prettier.singleQuote": true,
    "volar.autoCompleteRefs": false,
    "volar.codeLens.pugTools": false,
    "volar.completion.preferredTagNameCase": "pascal",
    // File Nesting
    // this might not be up to date with the repo, please check yourself
    // https://github.com/antfu/vscode-file-nesting-config
    "explorer.fileNesting.enabled": true,
    "explorer.fileNesting.expand": false,
    "explorer.fileNesting.patterns": {
        "*.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",
        "*.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",
        "//": "Last update at 4/29/2023, 2:04:58 PM",
        "BUILD.bazel": "*.bzl, *.bazel, *.bazelrc, bazel.rc, .bazelignore, .bazelproject, WORKSPACE",
        "CMakeLists.txt": "*.cmake, *.cmake.in, .cmake-format.yaml, CMakePresets.json",
        "I*.cs": "$(capture).cs",
        "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",
        "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*, .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, 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": ".pdm.toml, pdm.lock, pyproject.toml",
        "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.*",
        "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, 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*",
        "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.*"
    }
}
ESlint

Линтер - правая рука кодера. Он проверяет ошибки, форматирует код, делает еще много полезного

В то же время, хорошо настроить ESlint - довольно нетривиальная задача. Множество плагинов к нему, часть устаревшие, многие конфликтуют между собой.

Поэтому для не очень изощренных знатоков ESlint-a самое лучшее воспользоваться готовым решением. Второй человек в экосистеме Vue Antony Fu поделился своим конфигом

Для его установки достаточно добавить @antfu/eslint-config пакет в package.json devDependencies. Если заглянуть внутрь, там будет десятки подобранных пакетов и настроек.

К сожалению, форматирование <style> блока во .vue файлах не работает, поэтому приходится еще и включать Prettier в ручном режиме.

Онлайн песочницы для Vue 3
Еще программы, полезные в веб разработке
  • Hoppscotch/ - запросы к API
  • Postman - запросы к API, создание API
  • Xshell - удобный SSH клиент
  • HeidiSQL - клиент для доступа к SQL базам данных
Какая конфигурация компьютера подходит для фронтенд разработки?

Оперативной памяти минимум 16Гб и хороший (быстрый) SSD диск, всё остальное вторично, включая процессор. Потратьте лучше деньги на качественный второй монитор 22+ дюймов, удобную клавиатуру и мышку.

Для фулстек разработки (и не только) удобно еще иметь мини-ПК, куда переносится база данных, вебсервер и другие [микро]сервисы. Он может работать как сервер, без монитора и клавиатуры.

Также на него можно поставить репозиторий исходного кода. С основной машины подсоединение идет в VS Code через SSH Remote connection. В итоге и бэк, и фронт (Node.js) запускаются на твоем минисервере, и твой ноут больше не греется и не пытается взлететь с помощью бешено вращающихся вентиляторов.

Работать так значительно производительней (MySQL, вебсервера, Docker крутятся на Linux быстрей и надёжней, как и Nodе.js), комфортней и тише. Кулер мини-ПК в штатном режиме включается только на пару секунд при загрузке ОС.