当前位置：首页 > article >正文

vue项目使用eslint+prettier管理项目格式化

article 2024/11/18 19:02:35

代码格式化、规范化说明

使用eslint+prettier进行格式化，vscode中需要安装插件ESLint、Prettier - Code formatter，且格式化程序选择为后者（vue文件、js文件要分别设置）  
对于eslint规则，在格式化时不会全部自动调整，建议的处理方式为：   
1.手工按提示进行处理  
2.vsocode中在源码上右键---源代码操作--Fix all ESLint auto-fixable problems（主要包含attribute小写、顺序、js代码块顺序等）  
使用此方式要注意，有时会处理错误，建议先格式化一次后再进行此操作  
3.执行npm run lint，此种方式针对所有文件，但有的错误或警告有时候无法修复  
4.对单行取消提示：在前面加注释如// eslint-disable-next-line vue/require-default-prop，如果是vscode可以通过鼠标悬浮出现修复提示后自动添加。但要注意，对有的代码，如html元素有多个attribute换行时，前面增加 // ....这样的注释并不被认可。  
5.对文件取消息提示：在vue文件第一行增加，在js文件第1行增加// eslint-disable  
注意：错误（红色）必须按提示进行处理，不能取消提示，警告（黄色）尽量处理，实在不好处理的，可按行或按文件取消提示

1、将指定版本的这些依赖安装到 `devDependencies` 中的 `npm` 命令：

npm install --save-dev @vue/eslint-config-standard@^4.0.0 eslint@^8.33.0 eslint-config-airbnb-base@^15.0.0 eslint-config-prettier@^8.6.0 eslint-plugin-import@^2.27.5 eslint-plugin-prettier@^3.1.4 eslint-plugin-prettier-vue@^2.1.1 eslint-plugin-vue@^9.9.0 prettier@^2.1.2 prettier-vue@^1.1.2

2、项目根路径引入相关配置文件

.prettir的全部规范只有十来个，详情可参考https://www.prettier.cn/docs/options.html）

3、scripts中引入lint

"lint": "eslint \"src/**/*.{js,vue}\" --quiet --fix",
"lint:prettier":"prettier --write \"src/**/*.{js,vue}\"",

4、使用lint

npm run lint
！！！！注意：eslint会自动修复一些错误，但有时会引入新的错误，为了确保不影响现有功能，请手动检查每个被修复的文件。！！！！

5、使用prettier脚本

npm run lint:prettier
会自动使用 Prettier 格式化项目文件errc.json：Prettier 的配置文件，用于规定代码格式化规则，如缩进、引号使用、分号添加等。
.prettierignore：指定 Prettier 不处理的文件或目录。
.eslintrc.json：ESLint 的配置文件，定义代码检查规则，包括语法错误、风格问题等。
.eslintignore：指定 ESLint 不检查的文件或目录。

prettie

在这里插入图片描述

.prettierrc.json代码

{
  "printWidth": 120,
  "singleQuote": true,
  "useTabs": false,
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

.prettierignore代码

dist/*
node_modules

.eslintrc.json代码

{
  "root": true,
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": [
    "airbnb-base/legacy",
    "plugin:vue/recommended",
    "prettier"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": [
    "vue",
    "import"
  ],
  "rules": {
    "prefer-exponentiation-operator": "off",
    "eqeqeq": "off",
    "no-underscore-dangle": 0,
    "vue/multi-word-component-names": 0,
    "func-names": 0,
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true,
        "optionalDependencies": true,
        "peerDependencies": true
      }
    ],
    "no-console": [
      "warn",
      {
        "allow": [
          "warn",
          "error",
          "log"
        ]
      }
    ],
    "no-debugger": 2,
    "no-alert": 2,
    "no-param-reassign": [
      "error",
      {
        "props": false
      }
    ],
    "lines-between-class-members": 0,
    "dot-notation": 0,
    "no-plusplus": [
      "error",
      {
        "allowForLoopAfterthoughts": true
      }
    ]
  }
}