工程化-vue3+ts：代码检测工具 ESLint

# 安装 ESLint 和 Vue 插件
npm install eslint eslint-plugin-vue --save-dev
 
# 初始化 ESLint 配置文件
npx eslint --init
 
# 安装额外的 ESLint 插件，如 TypeScript
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
 
# 在 ESLint 配置文件中设置规则，例如 .eslintrc.js 或 .eslintrc.json
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'standard',
    'plugin:@typescript-eslint/recommended',
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
  ],
  rules: {
    // 在这里添加或覆盖 ESLint 规则
  },
};
 
# 在 package.json 中添加 ESLint 脚本
"scripts": {
  "lint": "eslint --ext .js,.vue,.ts ."
}
 
# 运行 ESLint 检查代码质量
npm run lint

这个例子展示了如何在一个使用 Vue 3 和 TypeScript 的项目中设置 ESLint。首先安装 ESLint 和 Vue 插件，然后初始化配置文件。接着安装 TypeScript 相关的插件，以便 ESLint 能够理解 TypeScript 代码。在 .eslintrc 文件中配置 ESLint 规则，包括环境、扩展插件集、解析器选项和插件。最后，在 package.json 中添加一个脚本来运行 ESLint，并通过执行这个脚本来检查代码质量。