eslint不能格式化vue的template部分

Question

eslint执行格式化vue的时候只格式化js部分，不格式化html模板和css部分，有没有解决办法？求大佬指点

Answer 1

可以的，借助于插件prettier-eslint
.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  parserOptions: {
    parser: 'babel-eslint'
  },
  plugins: ['prettier'],
  rules: {
     .....
  }
}

依赖

"@vue/eslint-config-prettier": "^6.0.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^1.19.1",
    "prettier-eslint": "^11.0.0",

package.json

再借助于vscode的插件ESLINT，这样保存时候执行eslint就会格式化html和js

Answer 2

eslint是检查语法问题的工具，需要对代码格式化的话，可以试试vscode的formatter工具

希望能帮到您