目录

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.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.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,不符合规定的样式,会被自动修复,但个别需要自行修复

Logo

前往低代码交流专区

更多推荐