菜鸟追梦旅行

这个屌丝很懒，什么也没留下！

热门标签

vue2项目配置prettier + eslint + commitlint + stylelint_vue2 stylelint

作者：菜鸟追梦旅行 | 2024-05-20 23:34:49

踩

vue2 stylelint

1、全局安装vue、vue-cli

2、安装commitlint

2.1、package.json中自动会新增如下配置

2.2、项目根目录自动新增commitlint.config.js文件，配置如下

3、添加eslint提交检测

3.1、安装eslint-config-prettier、eslint-plugin-prettier、lint-staged

3.2、在根目录新增.eslintrc.js文件，具体配置需要根据项目自行配置，常用配置查看可以访问 https://blog.csdn.net/Sharon598/article/details/123333163 第4条，在这里，我就简单配置如下：

3.3、根目录新增lint-staged.config.js文件，配置如下：

3.4、package.json文件配置修改，配置如下：

3.5、配置.eslintignore文件，这个文件是配置哪些文件不需要eslint检测的，所以可以根据自己项目自行配置此文件，配置如下：

3.6、package.json文件配置lint脚本检测代码

4、添加prettier优化代码

4.1、添加.prettierrc.js文件，配置如下：

4.2、添加.prettierignore，可以根据项目需要，自行配置

4.3、lint-staged-config.js文件修改如下

4.4、package.json添加prettier脚本

5、添加stylelint提交检测配置

5.1、安装stylelint、stylelint-config-recommended-vue、stylelint-config-standard、stylelint-config-prettier、stylelint-order、stylelint-less、postcss-html、postcss-less@4.0.0（必须是这个版本，否则会报错）

5.2、添加.stylelintignore文件，配置如下

5.3、添加.stylelintrc.js文件，配置如下

5.4、package.json添加stylelint脚本

1、全局安装vue、vue-cli

vue2的项目，必须使用vue2对应得vue-cli的版本，vue-cli4.5以上对应的就是vue3了，所以：


npm install -g vue@2.7.10
npm install -g @vue/cli@4.4.6

2、安装commitlint

vue add commitlint

执行完以后项目分别有以下变化

2.1、package.json中自动会新增如下配置

2.2、项目根目录自动新增commitlint.config.js文件，配置如下

3、添加eslint提交检测

3.1、安装eslint-config-prettier、eslint-plugin-prettier、lint-staged

npm install --save-dev eslint-config-prettier eslint-plugin-prettier lint-staged

3.2、在根目录新增.eslintrc.js文件，具体配置需要根据项目自行配置，常用配置查看可以访问 https://blog.csdn.net/Sharon598/article/details/123333163 第4条，在这里，我就简单配置如下：


module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 
    'prettier/prettier': 'off'
  }
}

3.3、根目录新增lint-staged.config.js文件，配置如下：


module.exports = {
  '*.{js,vue}': [
    'vue-cli-service lint ./src --fix',
    'git add'
  ]
}

3.4、package.json文件配置修改，配置如下：


"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }

重启项目，在页面中随意定义一个变量，例如：


handleCancel() {
   let aaa = [];
   this.visible = false;
}

提交代码，报错如下:

3.5、配置.eslintignore文件，这个文件是配置哪些文件不需要eslint检测的，所以可以根据自己项目自行配置此文件，配置如下：


dist/*
node_modules/*
packages/*
public/*

3.6、package.json文件配置lint脚本检测代码


"scripts": {
    "lint": "eslint src/**/* --ext .js,.vue"
}

重启项目，执行npm run lint，项目就会检测哪些代码不符合要求

4、添加prettier优化代码

4.1、添加.prettierrc.js文件，配置如下：


module.exports = {
  // 超过80就换行
  printWidth: 80,
  // tab缩进大小，默认为2
  tabWidth: 2,
  // 使用tab缩进，默认false
  useTabs: false,
  // 使用分号，默认true
  semi: false,
  // 使用单引号, 默认false，(在jsx中配置无效, 默认都是双引号)
  singleQuote: true,
  // 行尾逗号，默认none，可选（none|es5|all），es5 包括es5中的数组、对象，all 包括函数对象等所有可选
  trailingComma: 'none',
  // 对象中的空格 默认true，true: { foo: bar }，false: {foo: bar}
  bracketSpacing: true,
  // JSX标签闭合位置 默认false
  jsxBracketSameLine: false,
  // 箭头函数参数括号 默认avoid 可选（avoid|always），avoid 能省略括号的时候就省略 例如x => x ，always 总是有括号
  arrowParens: 'avoid',
  // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
  ignorePath: '.prettierignore',
  // 在jsx中把'>' 是否单独放一行
  jsxBracketSameLine: false
}

4.2、添加.prettierignore，可以根据项目需要，自行配置


dist/*
node_modules/*
packages/*
public/*

4.3、lint-staged-config.js文件修改如下


module.exports = {
  '*.{js,vue}': [
    'vue-cli-service lint ./src --fix',
    'prettier --write ./src',
    'git add'
  ]
}

4.4、package.json添加prettier脚本


"scripts": {
    "lint:fix": "prettier src/**/* --write",
}

重启项目，执行npm run lint:fix，会发现项目中有不符合规范的代码，自动被修复了，pretter只会自动修复不影响逻辑的代码，影响逻辑的代码，需要手动修复

4.5、执行npm run lint:fix后，可能会在终端出现这种提示

此时只需要，执行 git config core.autocrlf false 即可

5、添加stylelint提交检测配置

5.1、安装stylelint、stylelint-config-recommended-vue、stylelint-config-standard、stylelint-config-prettier、stylelint-order、stylelint-less、postcss-html、postcss-less@4.0.0（必须是这个版本，否则会报错）

5.2、添加.stylelintignore文件，配置如下


dist/*
node_modules/*
packages/*
public/*

5.3、添加.stylelintrc.js文件，配置如下


module.exports = {
  // extends: ['stylelint-config-standard', 'stylelint-config-prettier', 'stylelint-config-html', "stylelint-config-standard-scss", 'stylelint-config-recommended-vue'],
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-standard',
    'stylelint-config-recommended-vue',
    'stylelint-config-html',
    'stylelint-config-prettier'
  ],
  plugins: ['stylelint-order', 'stylelint-less'],
  ignorePath: '.stylelintignore',
  overrides: [
    {
      files: ['**/*.{html,vue}'],
      customSyntax: 'postcss-html'
    },
    {
      files: ['**/*.less'],
      customSyntax: 'postcss-less'
    }
  ],
  rules: {
    indentation: 2,
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep']
      }
    ],
    'number-leading-zero': 'never',
    'no-descending-specificity': null,
    'font-family-no-missing-generic-family-keyword': null,
    'selector-type-no-unknown': null,
    'at-rule-no-unknown': null,
    'no-duplicate-selectors': null,
    'no-empty-source': null,
    // 禁止空块
    'block-no-empty': true,
    'selector-pseudo-class-no-unknown': [
      true,
      { ignorePseudoClasses: ['global'] }
    ],
    'max-nesting-depth': null,
    'max-line-length': null,
    'selector-max-compound-selectors': null,
    'selector-no-qualifying-type': null,
    'selector-class-pattern': null,
    'function-parentheses-newline-inside': null,
    'alpha-value-notation': 'number',
    // 禁止空第一行
    'no-empty-first-line': true,
 
    'order/properties-order': [
      'position',
      'top',
      'right',
      'bottom',
      'left',
      'z-index',
      'display',
      'flex-wrap',
      'justify-content',
      'align-items',
      'float',
      'clear',
      'overflow',
      'overflow-x',
      'overflow-y',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'width',
      'min-width',
      'max-width',
      'height',
      'min-height',
      'max-height',
      'font-size',
      'font-family',
      'font-weight',
      'text-justify',
      'text-align',
      'text-indent',
      'text-overflow',
      'text-decoration',
      'white-space',
      'color',
      'background',
      'background-position',
      'background-repeat',
      'background-size',
      'background-color',
      'background-clip',
      'border',
      'border-style',
      'border-width',
      'border-color',
      'border-top-style',
      'border-top-width',
      'border-top-color',
      'border-right-style',
      'border-right-width',
      'border-right-color',
      'border-bottom-style',
      'border-bottom-width',
      'border-bottom-color',
      'border-left-style',
      'border-left-width',
      'border-left-color',
      'border-radius',
      'opacity',
      'filter',
      'list-style',
      'outline',
      'visibility',
      'box-shadow',
      'text-shadow',
      'resize',
      'transition'
    ]
  }
}

5.4、package.json添加stylelint脚本


"scripts": {
    "stylelint:fix": "stylelint src/**/*.{html,vue,less} --fix"
}

重启项目，执行npm run stylelint:fix，不符合规定的样式，会被自动修复，但个别需要自行修复

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/599870