vue项目配置eslint(附visio studio code配置)

在Vue项目中配置ESLint，首先需要安装ESLint及其必要的插件：

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

然后，在项目根目录下创建一个.eslintrc.js配置文件，并配置ESLint规则。以下是一个基本的配置示例：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/essential',
    'standard',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'vue',
  ],
  rules: {
    // 在这里添加或覆盖规则
  },
};

接下来，在package.json中添加一个脚本来运行ESLint：

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

运行以下命令来检查代码质量：

npm run lint

对于VS Code编辑器，你可以安装ESLint插件来在编写代码时实时检查代码质量：

1. 打开VS Code的扩展市场。
2. 搜索并安装ESLint插件。
3. 确保VS Code设置中启用了ESLint插件。

此外，可以在VS Code的settings.json中进行配置以满足项目需求：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

这样，你就可以在VS Code中编写代码，并在保存文件时自动修正一些问题，也可以手动触发ESLint检查。