Vue 3与ESLint、Prettier：构建规范化的前端开发环境

# 安装Vue 3
npm install -g @vue/cli
vue --version
 
# 创建一个使用Vue 3的新项目
vue create my-project
cd my-project
 
# 添加ESLint和Prettier
npm install --save-dev eslint eslint-plugin-vue prettier eslint-config-prettier eslint-plugin-prettier
 
# 初始化ESLint与Prettier配置
npx eslint --init
 
# 修改ESLint配置文件.eslintrc.js或.eslintrc.json，添加对Vue文件的支持，并引入Prettier作为插件
{
  "extends": [
    // ...
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended"
  ],
  "rules": {
    // 在这里添加或覆盖规则
  },
  "overrides": [
    {
      "files": ["*.vue", "*.js"],
      "processor": "vue/vue3-essential"
    }
  ]
}
 
# 创建Prettier配置文件.prettierrc.js或.prettierrc.json
{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": false,
  "useTabs": false,
  // 其他根据需要配置
}
 
# 保存时自动格式化代码
npm install --save-dev @vue/cli-plugin-eslint @vue/eslint-config-standard
 
# 修改vue.config.js，添加lintOnSave选项
module.exports = {
  lintOnSave: true,
  // 其他配置
};

这段代码展示了如何为Vue 3项目设置ESLint和Prettier以保证代码质量和格式一致。首先，我们创建一个新的Vue 3项目，然后通过npm安装ESLint及其Vue插件和Prettier相关包。接下来，我们初始化ESLint并配置.eslintrc.js或.eslintrc.json文件，使其能够识别Vue文件并引入Prettier作为代码格式化工具。我们还创建了.prettierrc.js或.prettierrc.json文件来配置Prettier的规则。最后，我们修改vue.config.js文件，以便在保存代码时自动运行ESLint和Prettier。