Eslint+Prettier配置

小半 • 2023年1月19日上午10:23 • Vue • 阅读 258

代码规范

eslint官网
 prettier官网
我们通过配置eslint + prettier保证项目代码规范。

请大家先安装ESLint和Prettier两个vscode扩展

Eslint配置

使用eslint —-init初始化配置文件

npx eslint --init

按照如图的步骤选择：

项目文件变化一览

package.json文件变化

{
  ...
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.30.7",
    "@typescript-eslint/parser": "^5.30.7",
    "eslint": "^8.20.0",
    "eslint-plugin-vue": "^9.2.0",
  }
  ...
}

生成了一个.eslintrc.cjs文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 13,
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    "rules": {
    }
};

检测下eslint 是否生效

如果项目中没有安装 typescript 你还需要 yarn add -D typescript

eslint cli中文官网

package.json文件里添加 script

{
  "scripts":{
    "lint": "eslint . --ext .ts,.vue" 
  }
}

eslint 默认只检测.js的文件，所以需要 –ext 来指定文件类型，详情可参考官网
有的时候可能eslint没有及时的生效，可以重新启动下我们的编辑器

执行会报错，原因是不识别SFC

适配vue3

看下eslint-plugin-vue文档，只需要vue的eslint的相关配置改成一个配置就好了

module.exports = {
  ...,
  "extends": [
    // "eslint:recommended",
    "plugin:vue/vue3-recommended",
    // "plugin:@typescript-eslint/recommended"  
  ],
  ...
}

添加 prettier

需要安装两个插件

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

修改下.eslintrc.cjs

module.exports = {
  ...,
  extends: [
    ...,
    "plugin:prettier/recommended",
  ],
  ...
}

创建.prettierrc.js, 内容如下

module.exports = {
  // printWidth: 80,
  // tabWidth: 2,
  // useTabs: false,
  semi: false, // 未尾逗号, default:  true
  singleQuote: true, // 单引号 default: false
  // quoteProps: 'as-needed',
  // jsxSingleQuote: false,
  trailingComma: 'none', // 未尾分号 default: es5    all | none | es5
  // bracketSpacing: true,
  // bracketSameLine: false,
  // jsxBracketSameLine: false,
  arrowParens: 'avoid', // default: always
  // insertPragma: false,
  // requirePragma: false,
  proseWrap: 'never',
  // htmlWhitespaceSensitivity: 'css',
  // vueIndentScriptAndStyle: false,  // .vue 缩进
  endOfLine: 'auto' // default lf
}