eslint+prettier前端代码规范配置

关玄裳
2023-12-01

前端代码规范配置

参考来源:https://blog.csdn.net/u013361179/article/details/108885859

前言

  1. eslint的作用:eslint作用是按照一定规则,检测代码质量;

  2. prettier的作用:prettier起到的作用是按照统一风格去美化代码

    目前支持的格式:

    • javascript、jsx、ts、tsx
    • flow
    • json
    • css、less、scss
    • graphql
    • markdown
    • yaml

ESlint虽然可以检测代码质量问题并给出提示,但是格式化的能力有限,只能格式化js,不支持css,html等语言。而Prettier具有更强大的功能,能够支持包括 js、ts、各种 css、vue 和 md 等前端绝大部分的语言和文件格式。因此,我们可以通过ESlint和Prettier组合使用,用Eslint进行代码校验,用Prettier统一代码风格。

eslint规则

规则配置:https://blog.51cto.com/itcjf/2995936#types–complex

prettier规则

官网:https://www.prettier.cn/

settings.json文件

setting 配置(ctrl+shift+P打开

setting.json文件分为工作区和用户区,

  1. 工作区:如果只是想改变该项目的配置,就在工作区;
  2. 用户区:如果是想所有项目都用改配置就在用户区添加,用户区添加以后其他电脑登录对应用户也会同步更新的;

vetur

注意:在 vscode 中其实 Vetur 也有一套 Format 规则,因此会和 prettier 冲突。打开 setting-扩展-Vetur 将 Vetur 的规则改成 Prettier 就好了。如果有需要忽略的文件可以在 .eslintignore 文件中进行配置(可以忽略)

配置流程

一、vscode插件商城安装插件

首先安装的代码格式化插件:vetur、ESLint

二、安装依赖

  1. npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint

    npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint --legacy-peer-deps
    

​ eslint: ESLint 的核心代码
​ babel-eslint: eslint 与 babel 整合包
​ eslint-plugin-vue @vue/cli-plugin-eslint: eslint 与 vue 整合包

  1. npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

    npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli --legacy-peer-deps
    

    prettier:prettier 插件的核心代码
    eslint-plugin-prettier:这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用,相当于代码不符合 Prettier 的标准时,会报一个 ESLint 错误
    eslint-config-prettier:解决 ESLint 中的样式规范和 prettier 中样式规范的冲突,以 prettier 的样式规范为准,使 ESLint 中的样式规范自动失效,本质上这个工具其实就是禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。
    prettier-eslint-cli:prettier-eslint-cli 允许多个文件用 prettier-eslint 进行格式化

三、配置eslint(.eslintrc.js)

ESlint配置中各项值的含义:

https://eslint.bootcss.com/docs/user-guide/configuring

  1. parserOptions

    解析器选项。指定你想支持的语言,默认支持es5。指定啥语言,eslint就按照啥语法检查。

  2. parser

    指定要使用的解析器。(parser和parserOptions要同时使用)

  3. processor

    指定插件的处理器。(需要和 plugins 字段配合使用)处理器可以从另一种文件中提取 JavaScript 代码,然后让 ESLint 检测 JavaScript 代码。或者处理器可以在预处理中转换 JavaScript 代码。

  4. environments

    指定代码运行环境。

  5. globals

    定义全局变量。告知 eslint,不必报 no-undef 错误。

  6. rules

    手动自定义代码规范。

    • off 或 0:表示不验证规则。
    • warn 或 1:表示验证规则,当不满足时,给警告。
    • error或 2 :表示验证规则,不满足时报错。
  7. extends

    用于继承某些基础配置。值可以是字符串/数组。值为数组时,每个配置继承它前面的配置。(说白了,就是别人提前写好了一套 rules,你直接拿过来用就行。不用自己一个一个一个的,写 rules 规则。)

ESlint配置

在项目的根目录下,新建.eslintrc.js 或者一键生成npm init @eslint/config文件,将定义的eslint规则拷贝进去

module.exports = {
    // 指定代码的运行环境
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    extends: [
        //继承 vue 的标准特性
        'eslint:recommended',
        'plugin:vue/essential'],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
    },
    parserOptions: {
        // 定义ESLint的解析器
        parser: "babel-eslint",
        sourceType: "module",
    },
    plugins: ['vue'],
    rules: {
        indent: [
            2,
            2, // 缩进两个
            {
                SwitchCase: 1, // switch case缩进缩进2格(2x1)
                VariableDeclarator: 'first' // const let var 对齐缩进
            }
        ],
        eqeqeq: 2, // 要求使用 === 和 !==
        'lines-around-comment': [
            2,
            {
                beforeBlockComment: true, // 块注释之前空行
                beforeLineComment: false, // 行注释之前空行
                allowBlockStart: true, // 允许注释出现在块语句的开始位置
                allowObjectStart: true, // 允许注释出现在对象字面量的开始位置
                allowArrayStart: true, // 允许注释出现在数组字面量的开始位置
                allowClassStart: true, // 允许注释出现在类的开始位置
                ignorePattern: '#'
            }
        ],
        'spaced-comment': 2, // 注释上的空格,//xxx => // xxx
        'no-whitespace-before-property': 2, // 禁止点调用有空格 a. b => a.b
        'no-multiple-empty-lines': [
            2,
            {
                max: 1, // 连续最大空行数
                maxEOF: 0 // 文件末尾空行数
            }
        ],
        'block-spacing': [2, 'always'], // 代码块空格{return} => { return }
        'arrow-spacing': 2, // 要求箭头函数的箭头部分前后的空格
        quotes: [
            2,
            'single',
            {
                // 允许字符串使用单引号或者双引号,只要字符串中包含了一个其他引号,否则需要转义
                avoidEscape: true,
                // 允许字符串使用反勾号
                allowTemplateLiterals: true
            }
        ],
        'brace-style': 2, // else 与它的大括号同行。
        curly: 2, // if 语句如果包含多个语句则使用大括号。
        'operator-linebreak': 2, // 三元表达式如果是多行,则 ? 和 : 放在各自的行上。
        // 对属性名强制使用驼峰
        camelcase: [2, {
            properties: "always"
        }],
        "no-console": 2,//禁止使用console
        'comma-dangle': 2, // 无多余逗号。
        'no-underscore-dangle': 2// 此规则不允许在标识符中使用悬空下划线。
    }
};

四、配置prettier (.prettierrc.js)(可选)

可配置也可不配置:若不配置在setting.json文件中加入"vetur.format.defaultFormatter.js": "none",即可

//一键格式化
npx prettier --write .

在项目的根目录下,创建.prettierrc.js 文件,定义的prettier规则拷贝进去

module.exports = {
  // 最大长度80个字符
  printWidth: 80,
  // 行末分号
  semi: true,
  // 单引号
  singleQuote: true,
  // JSX双引号
  jsxSingleQuote: false,
  // 尽可能使用尾随逗号(包括函数参数)
  trailingComma: 'none',
  // 在对象文字中打印括号之间的空格。
  bracketSpacing: true,
  // > 标签放在最后一行的末尾,而不是单独放在下一行
  jsxBracketSameLine: false,
  // 缩进
  tabWidth: 2,
  // 使用tab还是空格
  useTabs: false,
  // 行尾换行格式
  endOfLine: 'auto',
  //空格敏感
  HTMLWhitespaceSensitivity: 'ignore',
  extends: [
    //继承 vue 的标准特性
    'plugin:vue/essential',
    'eslint:recommended',
    //避免冲突
    'plugin:prettier/recommended'
  ]
};

五、配置setting.json文件

ctrl+shift+P打开,将配置拷贝进去以后,保存关闭

  //设置vetur默认html代码格式化风格
  "vetur.format.defaultFormatter.html": "prettier",
  // 为ESLint启用“保存时自动修复”,并且仍然具有格式和快速修复功能
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "eslint.enable": true,
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
//保存的时候格式化代码
  "editor.formatOnSave": true,
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],

六、配置eslintignore文件(.eslintignore)

需要忽略格式化的文件就放入该文件

node_modules
.vscode
.idea
/public
.eslintrc.js
.DS_Store
/dist

七、最后

上述步骤完成以后,记得一定要重启VSCode才会生效

转换思路:

eslint规则+eslint插件:代码规则不符合eslint配置报红色错误提示;

eslint规则:代码不符合eslint规则,编译的时候报错;

prettier规则:让和eslint冲突的规则统一,自动保存的时候;

自动保存是分为两步的:
第一步是eslint自动修复js代码;
第二步是prettier格式化html+css代码和部分js代码,而在这个时候prettier格式化js代码会和eslint规则有冲突,这个时候eslint-config-prettier依赖会让以 prettier 的样式规范为准,使 ESLint 中的样式规范自动失效;

问题:
  1. 已经有eslint规则,为什么还要单独去写prettier规则?
    因为eslint规则只是针对于js代码,prettier规则是对于大部分代码格式化都有用的,vetur插件中自带prettier规范,对于prettier如果不想配置,直接在setting.json文件中加入:"vetur.format.defaultFormatter.js": "none"即可(主要是使vetur对js代码格式化失效)

  2. 哪些代码是可以自动修复的?
    空格,双引号这些格式的代码是可以自动修复的,代码规范报错会提示到具体代码,手动修改

参考来源:https://blog.csdn.net/u013361179/article/details/108885859

 类似资料: