uni-app ts代码校验

在uni-app项目中使用TypeScript（TS）进行代码校验，可以显著提升代码质量和开发效率。为了确保TS代码的正确性，通常我们需要配置TypeScript编译器以及相应的lint工具（如ESLint）。以下是一个简单的配置示例，展示如何在uni-app项目中设置TS代码校验。

1. 安装必要的依赖

首先，确保你的uni-app项目已经初始化了TypeScript支持。如果还没有，可以通过以下命令安装TypeScript：

npm install typescript ts-loader @types/node --save-dev

接着，为了进行代码风格校验，安装ESLint及其相关插件：

npm install eslint eslint-plugin-vue eslint-plugin-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

2. 配置TypeScript编译器

在项目根目录下创建或修改tsconfig.json文件，内容如下：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["webpack-env", "jest"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

3. 配置ESLint

在项目根目录下创建.eslintrc.js文件，内容如下：

module.exports = {
  root: true,
  env: {
    node: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {
    // 自定义规则
    '@typescript-eslint/no-explicit-any': 'off',
    'vue/multi-word-component-names': 'off',
  },
};

4. 使用Lint

配置完成后，你可以在package.json中添加lint脚本：

"scripts": {
  "lint": "eslint --ext .js,.vue,.ts,.tsx src/"
}

然后运行以下命令来校验代码：

npm run lint

通过上述配置，你的uni-app项目将支持TypeScript代码校验，确保代码风格和质量的一致性。如果有特定的校验需求，可以根据项目实际情况调整ESLint规则。