eslint+prettier完成代码格式化以及半自动化整理

1.配置eslint

npm install --save-dev eslint eslint-plugin-vue@next

2.package.json添加下面的配置

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },

 

3.添加.eslintrc.js

module.exports = {
  extends: ['plugin:vue/strongly-recommended', 'plugin:prettier/recommended'],
  rules: {
    'prettier/prettier': 'error',
  },
};

 

4.添加prettier.config

module.exports = {
  printWidth: 80, // 每行代码长度（默认80）
  tabWidth: 2, // 每个tab相当于多少个空格（默认2）
  useTabs: false, // 是否使用tab进行缩进（默认false）
  singleQuote: true, // 使用单引号（默认false）
  semi: true, // 声明结尾使用分号(默认true)
  trailingComma: 'all', // 多行使用拖尾逗号（默认none）
  bracketSpacing: true, // 对象字面量的大括号间使用空格（默认true）
  jsxBracketSameLine: false, // 多行JSX中的>放置在最后一行的结尾，而不是另起一行（默认false）
  arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（默认avoid）
};

5.package.json配置commit提交前的钩子

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true"
    }
  },
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "vue-cli-service lint",
      "git add"
    ],
    "*.vue": [
      "prettier --write",
      "vue-cli-service lint",
      "git add"
    ]
  },

6.  pageckage.json格式化自动命令配置

"format": "prettier --write \"src/**/*.js\" \"src/**/*.vue\" \"*json\" \"*.config.js\" \"*.eslintrc.js\""

终端执行命令

npm run format
//or
yarn format

7.package.json 配置lint检查

"lint": "vue-cli-service lint",

终端执行命令

yarn lint
//or
npm run lint

8.开发环境中开启lint

第一种方式基于vue-cli3.0创建的需要在vue.config.js中

lintOnSave: 'error',

第二种方式在webpack中配置：

config/index.js中添加配置

dev: {
  useEslint: true, 
}

build/webpack.base.config.js

const createLintingRule = () => ({
 test: /\.(js|vue)$/,
 loader: 'eslint-loader',
 enforce: 'pre',
 include: [resolve('src'), resolve('test')],
 options: {
  formatter: require('eslint-friendly-formatter'),
  emitWarning: !config.dev.showEslintErrorsInOverlay,
  fix: true,
 }
})

 

参考文档

vue+eslint详解

prettier

eslint配置

实例代码仓库

vue.config.js配置参数