VUE项目配置ESlint + Prettier + Stylelint

可追_code
483 阅读4分钟

为了提高项目质量，统一代码风格，为前端项目配置合适的ESlint代码检查、Prettier、Stylelint格式化优化。初始化好vue项目，开始配置。

1.ESlint

参考链接：eslint.nodejs.cn/docs/latest…

1.1 安装ESlint

yarn add eslint -D

1.2 初始化ESlint

yarn eslint --init

根据需要选择配置：

Snipaste_2024-05-14_15-55-34.png 初始化后生成配置文件 eslint.config.mjs

1.3 添加脚本 在package.json中添加脚本

{
    "scripts": {
        "lint": "eslint src --fix"
    }
}

1.4 测试 运行 yarn lint

1.5 编辑器配置

  • webstorm：自带ESLint插件，按下图进行配置，配置完成后，测试保存后代码是否有ESLint校验标记

image.png

  • vscode：安装ESLint插件

image.png

在settings.json中添加下方配置，完成后在项目中进行测试

{
    //配置 ESLint 检查的文件类型
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "html",
        "vue"
      ],
      // 代码保存时，自动执行ESlint格式化代码
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
      },
}

2.Prettier

参考链接：prettier.io/docs/en/ins…

2.1 安装Prettier

yarn add prettier -D

2.2 创建.prettierrc文件

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

2.3 添加配置

module.exports = { 
    // 一行的字符数，如果超过会进行换行，默认为80 
    printWidth: 80, 
    // 一个tab代表几个空格数，默认为2 
    tabWidth: 2, 
    // 是否使用tab进行缩进，默认为false，表示用空格进行缩减 
    useTabs: false, 
    // 字符串是否使用单引号，默认为false，使用双引号 
    singleQuote: true, 
    // 行位是否使用分号，默认为true 
    semi: false, 
    // 是否使用尾逗号，有三个可选值"<none|es5|all>" 
    trailingComma: "none", 
    // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar } 
    bracketSpacing: true 
}

修改配置后需要重新加载项目才能使用最新的配置，不知道是否有其他方法解决

2.4 在package.json中的script中添加以下命令

{ 
    "scripts": { 
        "format": "prettier --write \"./**/*.{html,vue,ts,js,json}\"", 
    } 
}

注意：如果您使用 ESLint，请安装eslint-config-prettier以使 ESLint 和 Prettier 能够很好地配合。它关闭所有不必要或可能与 Prettier 冲突的 ESLint 规则。 Stylelint 有一个类似的配置：stylelint-config-prettier

2.5 编辑器配置

  • webstorm

    自带Prettier插件，按下图进行配置，配置完成后，测试保存后代码是否按照格式保存

image.png

  • vscode 安装插件

image.png

在settings.json中添加下方配置，完成后在项目中进行测试

{
      // 代码保存时，自动执行ESlint格式化代码
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
        "source.fixAll.stylelint": "explicit",
      },
      // 默认使用prettier格式化
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "prettier.requireConfig": true,
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
}

3. stylelint

参考链接：stylelint.bootcss.com/user-guide/…

3.1 安装stylelint

yarn add -D stylelint stylelint-config-html stylelint-config-recess-order stylelint-config-standard postcss-html postcss-less

3.2 创建.stylelintrc.cjs文件，添加配置

module.exports = {
  extends: [
    'stylelint-config-standard', // 配置stylelint拓展插件
    'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化 // 配置stylelint scss插件 // 配置 vue 中 scss 样式格式化
    'stylelint-config-recess-order' // 配置stylelint css属性书写顺序插件,
    // 'stylelint-config-prettier', // 配置stylelint和prettier兼容, 注意stylelint大于等于v15是已经不需要此插件
  ],
  // 不同格式的文件指定自定义语法
  overrides: [
    {
      files: ['**/*.(less|css|vue|html)'],
      customSyntax: 'postcss-less'
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html'
    }
  ],
  ignoreFiles: [
    '**/*.js',
    '**/*.jsx',
    '**/*.tsx',
    '**/*.ts',
    '**/*.json',
    '**/*.md',
    '**/*.yaml'
  ],

  rules: {
    'font-family-no-missing-generic-family-keyword': null,
    'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
    'no-empty-source': null, // 关闭禁止空源码
    'selector-class-pattern': null, // 关闭强制选择器类名的格式
    'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
    // 'block-opening-brace-space-before': 'always', //大括号之前必须有一个空格或不能有空白符
    'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
    'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['tailwind']
      }
    ],
    'selector-pseudo-class-no-unknown': [
      // 不允许未知的选择器
      true,
      {
        ignorePseudoClasses: ['global', 'v-deep', 'deep'] // 忽略属性，修改element默认样式的时候能使用到
      }
    ],
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ]
  }
};
// @see https://stylelint.bootcss.com/

3.3 在package.json中的script中添加以下命令

{ 
    "scripts": { 
         "lint:style": "stylelint \"./**/*.{css,less,vue,html}\" --fix" 
    } 
}

3.4 编辑器配置

  • webstorm

    自带Prettier插件，按下图进行配置，配置完成后，测试保存后代码是否按照格式保存

image.png

  • vscode 安装插件

image.png 在settings.json中添加下方配置，完成后在项目中进行测试

{
      // 代码保存时，自动执行ESlint格式化代码
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
        "source.fixAll.stylelint": "explicit",
      },
      // stylelint校验的文件格式
      "stylelint.validate": ["css", "less", "vue", "html"],
}

4. EditorConfig

磨平不同编辑器间的制符大小不统一

4.1 创建.editorconfig文件，添加配置

# http://editorconfig.org
root = true
 
# 说明
## 设置文件编码为 UTF-8；
## 用两个空格代替制表符；
## 在保存时删除尾部的空白字符；
## 在文件结尾添加一个空白行；
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
 
[*.md]
trim_trailing_whitespace = false
 
[Makefile]
indent_style = tab

4.2 编辑器配置

  • webstorm 自带
  • vscode 安装插件

image.png

avatar
文章
阅读
粉丝