TypeScript 工程化

安装

npm i -D typescript
npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier
npm i -D prettier

VSCode 插件

Chinese
ESLint
Prettier
Vim

配置文件

用户 settings.json

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "dist",
        "sourceMap": true,
        "declaration": false,
        "target": "ES2017",
        "module": "ES6",
        "moduleResolution": "Node",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true
    },
    "include": [
        "src/**/*"
    ]
}

.eslintrc.js

module.exports = {
    root: true,
    env: {
        es2021: true
    },
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 'latest'
    },
    plugins: ['@typescript-eslint'],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier'
    ],
    rules: {}
};

.prettierrc.js

module.exports = {
    // 是否使用尾逗号
    trailingComma: "all",
    // 按 Tab 键的时候的缩进方式，true 使用 tab 缩进，false 将 tab 转换为空格缩进
    useTabs: false,
    // useTabs: false 的时候，使用空格缩进缩进几个空格
    tabWidth: 4,
    // 语句结尾是否加分号
    semi: true,
    // 字符串是否使用单引号
    singleQuote: true
  };

.eslintignore

dist

.prettierignore

dist