Vue 项目eslint 配置编程风格（VScode），前端开发进大厂面试必备技能

在Vue项目中配置ESLint以保证代码风格的一致性，并在VSCode中设置保存时自动格式化，可以提高团队协作效率并减少代码审查的时间。以下是配置步骤和示例：

1. 安装ESLint和必要的插件：

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

2. 在项目根目录创建.eslintrc.js配置文件，并配置规则：

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

3. 安装VSCode插件ESLint：

   在VSCode中打开扩展视图，搜索并安装ESLint插件。

4. 配置VSCode以在保存时自动格式化：

   在VSCode设置中添加以下配置：

{
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

5. （可选）创建.vscode目录，并在其中创建settings.json文件，以覆盖工作区设置：

{
  "editor.formatOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

完成以上步骤后，每次在VSCode中保存.vue、.js或.jsx文件时，ESLint都会自动检查并格式化代码，以确保代码风格的一致性。