Eslint + Prettier 格式化 Vue3 代码

VsCode 插件配置安装

• 安装插件 Vue Language Features (Volar)

  

  安装 Eslint

  

  安装 Prettier

  

  注意：禁用或卸载 Vetur

  需要配置的文件

  • 在 Vscode 项目根目录下： .vscode/extensions.json

    {
      "recommendations": [
        "johnsoncodehk.volar",
        "johnsoncodehk.vscode-typescript-vue-plugin",
        "dbaeumer.vscode-eslint"
      ],
    }
    

    • 对项目工作区单独设置 .vscode/settings.json

      {
        // eslint 保存格式化
        "eslint.enable": true,
        "eslint.run": "onType",
        "eslint.options": {
          "extensions": [".js", ".ts", ".jsx", ".tsx", ".vue"]
        },
        // 编辑器保存格式化
        "editor.codeActionsOnSave": {
          "source.fixAll": true,
          "source.fixAll.eslint": true
        },
        // .ts 文件格式化程序
        "[typescript]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        // .vue 文件格式化程序
        "[vue]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        "[json]": {
          "editor.defaultFormatter": "esbenp.prettier-vscode"
        },
        // 操作时作为单词分隔符的字符
        "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",./?",
        // 一个制表符等于的空格数
        "editor.tabSize": 2,
        // 行尾字符
        "files.eol": "\n",
        // 保存到额时候用使用 prettier进行格式化
        "editor.formatOnSave": true,
        
        // // 不要有分号
        // "prettier.semi": false,
        // // 使用单引号
        // "prettier.singleQuote": true,
        // // 默认使用prittier作为格式化工具
        // "editor.defaultFormatter": "esbenp.prettier-vscode",
        // // 一行的字符数，如果超过会进行换行，默认为80
        // "prettier.printWidth": 200,
        // // 尾随逗号问题，设置为none 不显示 逗号
        // "prettier.trailingComma": "none"
      }
      

      • 在项目的根目录下新建.prettierrc文件

        {
          "semi": false,
          "singleQuote": true,
          "useTabs": false,
          "tabWidth": 2,
          "printWidth": 80,
          "trailingComma": "none"
        }
        

        ● semi：语句末尾是否要加分号，默认值 true，选择 false 表示不加

        ● singleQuote：使用单引号还是双引号，选择 true，使用单引号

        ● useTabs：使用 tab 缩进还是空格缩进，选择 false

        ● tabWidth：tab 是空格的情况下，是几个空格，选择 2 个

        ● printWidth：当行字符的长度，推荐 80，也有人喜欢 100 或者 120

        ● trailingComma：在多行输入的尾逗号是否添加，设置为 none

        • 在项目的根目录下新建 .prettierignore 忽略文件

          /dist/*
          .local
          .output.js
          /node_modules/**
          **/*.svg
          **/*.sh
          /public/*
          

          • 在 .eslintrc.cjs 文件中配置规则，关闭 prettier 的警告

            /* eslint-env node */
            require("@rushstack/eslint-patch/modern-module-resolution");
            module.exports = {
              ...
              rules: {
                "prettier/prettier": "off",
              }
            }
            

            本内容来源于小豆包，想要更多内容请跳转小豆包 》