项目初始化
依赖安装采用pnpm
pnpm init @vitejs/app micro-app --template vue
安装TS
pnpm install typescript -D
写入tsconfig.json
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Basic Options */
"incremental": true /* Enable incremental compilation */,
"target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "ES2015" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
// "lib": [], /* Specify library files to be included in the compilation. */
"allowJs": true /* Allow javascript files to be compiled. */,
"checkJs": false,
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
"sourceMap": true /* Generates corresponding '.map' file. */,
// "outFile": "./", /* Concatenate and emit output to single file. */
"outDir": "./build" /* Redirect output structure to the directory. */,
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true, /* Enable project compilation */
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
// "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
"downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true /* Enable all strict type-checking options. */,
/* Used for vue-class-component V8's props feature */
"useDefineForClassFields": true,
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
/* Module Resolution Options */
"moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
"baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
"paths": {
"*": ["types/*"],
"@libs/*": ["src/libs/*"],
"@renderer/*": ["src/renderer/*"],
"@main/*": ["src/main/*"],
"@store/modules/*": ["src/store/modules/*"],
"@components/*": ["src/renderer/components/*"],
"@platform/*": ["src/*"],
"@root/*": ["src/*"]
} /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */,
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
"typeRoots": ["types", "node_modules/@types"] /* List of folders to include type definitions from. */,
//"types": [], /* Type declaration files to be included in compilation. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
/* Source Map Options */
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
"experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
/* Advanced Options */
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
},
"include": ["**/*.ts", "**/*_TS.vue"],
"exclude": ["node_modules", "test/renderer/components/*.spec.ts"]
}
eslint prettier
pnpm install eslint eslint-plugin-vue -D
写入 .eslintrc.js
module.exports = {
root: true,
parser: 'vue-eslint-parser',
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
},
env: {
browser: true,
node: true,
'jest/globals': true,
},
extends: ['eslint:recommended', 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended', 'prettier/vue'],
overrides: [
{
files: ['*.ts', '*.tsx', '*_TS.vue'],
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
sourceType: 'module',
project: './tsconfig.json',
extraFileExtensions: ['.vue'],
},
extends: [
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
'@vue/typescript',
'plugin:prettier/recommended',
],
plugins: ['@typescript-eslint', 'jest'],
},
],
globals: {
__static: true,
},
plugins: ['vue'],
rules: {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// 禁止var
'no-var': 2,
// 禁用 Object 的构造函数
'no-new-object': 2,
// 要求或禁止对象字面量中方法和属性使用简写语法
'object-shorthand': ['error', 'always'],
// 禁止使用 Array 构造函数//禁止使用 Array 构造函数
'no-array-constructor': 2,
// 解构赋值
'prefer-destructuring': [
'error',
{
array: true,
object: true,
},
{
enforceForRenamedProperties: false,
},
],
'no-multi-str': 2, // 禁止多行字符串
// [强制] 永远不要在一个非函数代码块（ if、while 等）中声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但它们的解析表现不一致。
'no-inner-declarations': 2,
// [强制] 如果一个函数适合用一行写出并且只有一个参数，那就把花括号、圆括号和 return 都省略掉。如果不是，那就不要省略。 !!!此条配置可能与规范存在差异 【https://cn.eslint.org/docs/rules/arrow-body-style】
'arrow-body-style': ['error', 'as-needed'],
// [建议] 不要使用 iterators 。使用高阶函数例如 forEach() , map() 和 reduce() 替代 for-of 。
'no-restricted-syntax': ['warn', 'ForOfStatement'],
// [强制] if 条件判断使用简写。
'nonblock-statement-body-position': ['error', 'beside'],
// [强制] 如果通过 if 和 else 使用多行代码块，把 else 放在 if 代码块关闭括号的同一行。
'brace-style': 'error',
'vue/no-parsing-error': [
2,
{
'x-invalid-end-tag': true,
},
],
// 优先使用 interface 而不是 type
'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// allow console during development
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 不允许连续空行，强制文件末尾只能有一个空行，代码最开头（和注释之间，如果有的话）只能有一个空行
'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 1, maxBOF: 1 }],
// 强制代码块之间空一行
'padding-line-between-statements': [
'error',
{ blankLine: 'always', prev: '*', next: 'return' },
{ blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
{ blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
{ blankLine: 'always', prev: '*', next: ['class', 'function'] },
{ blankLine: 'always', prev: '*', next: 'multiline-block-like' },
{ blankLine: 'always', prev: '*', next: 'export' },
{ blankLine: 'always', prev: 'import', next: '*' },
{ blankLine: 'any', prev: 'import', next: 'import' },
{ blankLine: 'always', prev: 'directive', next: '*' },
{ blankLine: 'any', prev: 'directive', next: 'directive' },
],
// 强制使用unix换行符
'linebreak-style': ['error', 'unix'],
// 类方法之间保留一个空行
'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
// TODO: vue3-recommended要显示声明emits，项目中涉及较多，暂时屏蔽该规则
'vue/require-explicit-emits': 0,
},
};
启用prettier
pnpm install -D prettier eslint-config-prettier eslint-plugin-prettier
module.exports = {
singleQuote: true,
printWidth: 120,
};
增加 shims-vue.d.ts
Cannot find module './App.vue' or its corresponding type declarations.ts
declare module "*.vue" {
import { Component } from "vue";
const component: Component;
export default component;
}
