vscode配置-保存格式化

vscode配置----ctrl+s保存格式化(vue3)

一、配置项目 Prettier - ESlint

• Vite 需要 Node.js 版本 >= 12.0.0

• vscode 文件 > 首选项 > 设置 > ( 搜索 setting ) > 点击 (在settings.json中编辑)

  1. settings.json (用户 / 工作区)

     {
            
       "editor.fontSize": 16,
       "workbench.colorTheme": "Ayu Dark Bordered",
       "workbench.iconTheme": "ayu",
       "window.zoomLevel": 0,
       "git.autofetch": true,
       "[json]": {
            
         "editor.quickSuggestions": {
            
           "strings": true
         },
         "editor.suggest.insertMode": "replace"
       },
     
       // #每次保存的时候自动格式化
       //   "editor.formatOnSave": true,
     
       "eslint.validate": [
         "javascript",
         "html",
         "javascriptreact", // react jsx
         "typescript", // ts
         "typescriptreact" // react tsx
       ],
       "editor.codeActionsOnSave": {
            
         "source.fixAll.eslint": true
       },
       "editor.formatOnSave": true,
     

• vscode 控制台安装

  1. npm install eslint eslint-plugin-vue prettier vue-eslint-parser -D

• vscode 扩展工具中安装

  1. Prettier ESLint
  2. Prettier - Code formatter

• 项目根目录中创建两个文件

  1. .prettierrc

  {
       
      "semi": false,
      "singleQuote": true,
      "trailingComma": "none",
      "bracketSpacing": true,
      "arrowParens": "always"
  }
  

  2. .eslintrc.js

  
  module.exports = {
       
    extends: ['eslint:recommended', 'plugin:vue/essential'],
    /*  extends: [
      'plugin:vue/vue3-essential',
      'eslint:recommended',
      'plugin:vue/essential',
      'plugin:vue/vue3-strongly-recommended',
      'plugin:vue/strongly-recommended',
      'plugin:vue/vue3-recommended'
    ], */
    parserOptions: {
       
  
      ecmaVersion: 2021, // 版本2018 会报错 import的错
      sourceType: 'module'
    },
    plugins: ['vue'],
    env: {
       
      node: true // 只需将该项设置为 true 即可 =>  解决nodule.exports 报错问题
    },
  
    rules: {
       
      // 忽略eslint不支持的组件命名规范
      'vue/multi-word-component-names': [
        'error',
        {
       
          ignores: ['user', 'login', 'welcome', 'breadcrumb', 'home']
        }
      ],
  
      'accessor-pairs': 2, // getter/setter 一起使用
      // => 前后有空格
      'arrow-spacing': [
        2,
        {
       
          before: true,
          after: true
        }
      ],
      'block-spacing': [2, 'always'],
      // {} 风格
      'brace-style': [
        2,
        '1tbs',