VSCode Configuration

Recommendation

In team development, configuring and using code quality tools like ESLint and Prettier is crucial. These tools help teams ensure code consistency and standards, thereby improving code readability, maintainability, and scalability.

ESLint is an extensible JavaScript linting tool used to identify and report patterns in code to find errors and style issues.

Prettier is a code formatting tool that automatically adjusts code format according to set rules, keeping the entire team's code style consistent.

VSCode Download

Official website: https://code.visualstudio.com

VSCode Plugin Installation

1. Click the Extensions icon on the left sidebar

2. Install plugins

Remember to restart VSCode after installing plugins for them to take effect

Copy and paste the following plugins as needed:

• Auto Close Tag
• Auto Rename Tag
• Autoprefixer
• Chinese (Simplified) Language Pack for Visual Studio Code
• Code Runner
• Color Info
• CSS Peek
• DotENV
• ESLint
• filesize
• Git History
• GitLens — Git supercharged
• HTML Boilerplate
• HTML CSS Support
• Icon Fonts
• JavaScript (ES6) code snippets
• JavaScript Debugger
• Jest
• Less IntelliSense
• Material Icon Theme
• Markdown All in One
• Markdown Preview Enhanced
• package-json-upgrade
• Path Intellisense
• Prettier - Code formatter
• PowerShell
• SCSS Everywhere
• SCSS IntelliSense
• stylelint
• Svg Preview
• Tailwind CSS IntelliSense
• vscode-fileheader
• vscode-icons
• vue-helper
• Vue - Official
• Alias Path Jump (alias path jumping)

VSCode Preferences Configuration

1. Press Ctrl + Shift + P simultaneously

2. Select Preferences: Open User Settings (JSON)

3. Copy and paste the following content into settings.json

{
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.options": {
    "extensions": [".js", ".vue", ".ts", ".tsx"]
  },
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "graphql",
    "javascriptreact",
    "json",
    "typescript",
    "typescriptreact",
    "vue-html"
  ],
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.nvue": "vue",
    "*.ejs": ""
  },
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.formatOnType": true,
  "javascript.format.enable": false,
  "search.followSymlinks": false,
  "backgroundCover.opacity": 0.5,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "markdownlint.config": {
    "default": true,
    "no-hard-tabs": false,
    "no-inline-html": false,
    "first-line-heading": false,
    "heading-increment": false,
    "no-bare-urls": false
  },
  "editor.minimap.enabled": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "explorer.confirmDelete": false,
  "editor.quickSuggestions": {
    "strings": true,
    "comments": true,
    "other": true
  },
  "html-css-class-completion.includeGlobPattern": "src/theme/**/*.{css,scss,sass,html}",
  "path-intellisense.mappings": {
    "/@": "${workspaceRoot}/src"
  },
  "markdown-preview-enhanced.previewTheme": "vue.css",
  "chatgpt.lang": "cn",
  "chatgpt.temperature": 0.9,
  "git.confirmSync": false,
  "fileheader.Author": "xiaoxue",
  "fileheader.LastModifiedBy": "xiaoxue",
  "security.workspace.trust.untrustedFiles": "open"
}

Duplicate IntelliSense Suggestions

1. Uninstall or disable the Vetur plugin
2. Remove the vs code configuration code

"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.validation.template": false,
"vetur.completion.autoImport": false,
"vetur.validation.style": false,
"vetur.validation.interpolation": false,
"vetur.validation.script": false,

Default Terminal Configuration

Press Ctrl + ` to open the terminal, then open terminal settings.

Add Default Terminal Profile filter after @feature:terminal command.

Select Command Prompt in the Default Terminal Profile option on Windows