vue 安装eslint、prettier

要安装eslint和prettier插件来进行vue项目的代码规范和格式化，可以按照以下步骤进行操作：

1. 首先，在项目中安装相关的插件。使用以下命令来安装eslint及其相关插件：

npm i eslint@7 -D
npm i eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-vue babel-eslint -D

需要注意的是，这里选择安装eslint7的版本是因为eslint8以上的版本废除了babel-eslint，转而使用@babel/eslint-parser替代。在使用@babel/eslint-parser时，可能会与项目本身的babel版本产生冲突，为了避免改动项目原有的babel版本，可以选择降低eslint版本。

2. 其次，需要在VSCode中安装eslint和prettier插件。打开VSCode，通过插件市场搜索并安装"ESLint"和"Prettier - Code formatter"插件。

3. 然后，在项目中进行配置。在项目根目录下创建一个名为".eslintrc.js"的文件，并添加以下配置内容：

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

这里使用了"plugin:vue/essential"，这是一个预设的规则集，如果想要自己配置规则，可以使用"plugin:vue/essential"预设，并在rules中自行添加规则。

4. 还需要在配置文件中添加一些特殊的配置。在".eslintrc.js"中的parserOptions中添加"parser: 'vue-eslint-parser'"，以解决在vue文件中eslint报错的问题。

5. 最后，为了自定义prettier的配置，可以在项目根目录下创建一个名为".prettierrc"的文件，然后在其中添加自定义的prettier配置。例如：

{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 300,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "auto",
  "eslintIntegration": false,
  "htmlWhitespaceSensitivity": "ignore",
  "ignorePath": ".gnore",
  "trailingComma": "none"
}

这里的配置可以根据个人的喜好进行调整，具体的参数意义可以参考Prettier官网的文档。

这样，你就可以在vue项目中安装并配置eslint和prettier了。这些工具可以帮助你保持代码规范和格式化，提高代码质量和可读性。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>