在vuecli项目中如何使用prettier和eslint

在VueCLI项目中，可以通过以下步骤来使用Prettier和ESLint：

1. 首先，你需要确保在项目中已安装Prettier和ESLint。

2. 在项目根目录创建一个名为.prettierrc.json的文件，并将以下代码添加到其中：

{
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"endOfLine": "auto"
}

这里的代码可根据你的需要进行更改，例如你想在代码中使用双引号而不是单引号，可以将"singleQuote"修改为false。

3. 创建一个名为.eslintrc.js的文件。将以下代码添加到其中：

module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/prettier'
],
parserOptions: {
parser: 'babel-eslint'
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
}

4. 最后，你需要安装@vue/eslint-config-prettier和eslint-plugin-prettier这两个插件。可以使用以下命令进行安装：

npm install --save-dev @vue/eslint-config-prettier eslint-plugin-prettier

安装完成后，你可以开始在VueCLI项目中使用Prettier和ESLint了！