vue中配置eslient

1、安装项
安装

yarn add eslient 或 npm i -g eslient
yarn add prettier
yarn add eslint-plugin-prettier
yarn add eslint-plugin-html
yarn add eslint-bable

2、以vscode为例，vscode提供了大量的插件，使用Prettier插件搭配eslint插件使用。

3、新建.eslintrc.js配置规则，也可以在package.json中配置，以.eslintrc.js为例

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
    },
    parserOptions: {
        parser: 'babel-eslint',
    },
    extends: ['eslint:recommended', 'plugin:vue/recommended'],
    // required to lint *.vue files
    plugins: ['vue', 'prettier'],
    // add your custom rules here
    rules: {
        'indent': 1, // 缩进
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 待定
        'vue/html-closing-bracket-newline': [
            'error',
            {
                singleline: 'never',
                multiline: 'always',
            },
        ],
        'vue/require-default-prop': 0,
        'vue/require-prop-types': 0,
        'vue/no-side-effects-in-computed-properties': 1,
        'vue/require-component-is': 0,
        'vue/no-use-v-if-with-v-for': 0,
    },
};

4、配置vscode，在首选项-用户设置-settings.json中添加一下代码

    "eslint.autoFixOnSave": true,
    "eslint.options": {
      "plugins": ["vue", "html", "ts"]
    },
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "html",
      {
        "language": "vue",
        "autoFix": true
      },
      {
        "language": "typescript",
        "autoFix": true
      },
      {
        "language": "typescriptreact",
        "autoFix": true
      }
    ],

如果还是不好使，需要在设置里勾选format on save

这样，就可以实现代码风格的统一，当我们保存代码的时候，就会自动修复代码格式了