vscode配置typescript和eslint的环境
Posted terrylin
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vscode配置typescript和eslint的环境相关的知识,希望对你有一定的参考价值。
一、typescript配置
tsconfig.build.json
{ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./deploy/dist", }, "exclude": ["node_modules", "dist", "test", "**/*spec.ts"] }
tsconfig.json
{ "compilerOptions": { "lib": ["es5", "es6"], "target": "es6", "module": "commonjs", "baseUrl": ".", "paths": { "@common/*":["src/common/*"], "@configuration/*":["src/modules/configuration"], "@creative/*": ["src/modules/creative/*"], "@admin/*": ["src/modules/admin/*"], "@auth/*":["src/modules/auth/*"], }, // 允许编译javascript文件 "allowJs": true, // 报告.js文件中的错误。与allowJs一起使用 "checkJs": true, // "plugins": [], // 若有未使用的局部变量则抛错 "noUnusedLocals": false, // 若有未使用的参数则抛错 "noUnusedParameters": false, // 类型为any时,是否需要发出警告,设置true,则不警告 "noImplicitAny": false, // 提供迭代器全面支持 "downlevelIteration": true, // 去掉注解 "removeComments": true, // 从tslib导入外部的辅助方法 "importHelpers": true, // 遇到@internal注解时,不会触发代码定义 "stripInternal": true, // 错误信息,跟踪信息将带有颜色和样式 "pretty": true, // 如果不是函数中的所有路径都有返回值,则提示Error "noImplicitReturns": true, // 允许从没有设置默认导出的模块中默认导入 "allowSyntheticDefaultImports": true, // 使用元数据特性 "emitDecoratorMetadata": true, // 支持ES7的装饰器特性 "experimentalDecorators": true, // 将严格校验switch-case语法 "noFallthroughCasesInSwitch": true, // 严格null检查模式,null和undefined值不包含在任何类型里 "strictNullChecks": true, // 保存上一次的编译信息,下一次进行增量更新 "incremental": false, // 不生成定义文件d.ts "declaration": false, // 生成.map文件 "sourceMap": false, // 跳过默认库检查 "skipLibCheck": true, // 输出文件的根目录 "outDir": "./dist", // 模块的解析策略 // "moduleResolution": "node", }, "include": ["src/**/*", "test/**/*"], "exclude": ["node_modules", "dist", "test", "**/*spec.ts"] }
二、lint配置
.eslintrc
{ "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint", "prettier"], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", "standard", "prettier/@typescript-eslint", "prettier" ], "parserOptions": { "project": "./tsconfig.json" }, "rules": { "no-useless-constructor": "off", "@typescript-eslint/indent": ["error", 4, { "VariableDeclarator": 4, "SwitchCase": 1 }], "@typescript-eslint/no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": true }], "@typescript-eslint/explicit-member-accessibility": ["error", {"accessibility": "no-public"}], "@typescript-eslint/explicit-function-return-type": ["off", { "allowExpressions": true, "allowTypedFunctionExpressions": true }], "@typescript-eslint/interface-name-prefix": 0, "@typescript-eslint/no-explicit-any": "off", "@typescript-eslint/no-use-before-define": "off", "@typescript-eslint/no-parameter-properties": 0, "@typescript-eslint/camelcase": ["off", {"properties": "always"}], "no-console": ["warn", { "allow": ["warn", "error"] }], "eqeqeq": ["warn", "always"] }, "env": { "node": true, "es6": true, "mocha": true, "jest": true } }
tslint.json
{ "defaultSeverity": "error", "extends": ["tslint:recommended", "tslint-config-prettier"], "jsRules": { "no-unused-expression": true }, "rules": { "eofline": false, "quotemark": [true, "single"], "indent": false, "member-access": [false], "ordered-imports": [false], "max-line-length": [true, 450], "member-ordering": [false], "curly": false, "interface-name": [false], "array-type": [false], "no-empty-interface": false, "no-empty": false, "arrow-parens": false, "object-literal-sort-keys": false, "no-unused-expression": false, "max-classes-per-file": false, "variable-name": [false], "one-line": [false], "one-variable-per-declaration": [false], "semicolon": [true, "always", "ignore-bound-class-methods"], "no-console": [false], "space-before-function-paren": false, "no-shadowed-variable": false }, "rulesDirectory": [] }
.prettierrc.js
module.exports = { // 一行最多 100 字符 printWidth: 400, // 使用 4 个空格缩进 tabWidth: 4, // 不使用缩进符,而使用空格 useTabs: false, // 行尾需要有分号 semi: true, // 使用单引号 singleQuote: true, // 末尾不需要逗号 trailingComma: "es5", // 大括号内的首尾需要空格 bracketSpacing: true, // 箭头函数,只有一个参数的时候,也需要括号 arrowParens: "always", parser: ‘typescript‘ };
相关依赖
"scripts": { "build": "rimraf dist && tsc -p tsconfig.json", "format": "prettier --write "src/**/*.ts" "test/**/*.ts"", "start": "cross-env NODE_ENV=development ts-node -r tsconfig-paths/register src/main.ts", "start:dev": "rimraf dist && cross-env NODE_ENV=development concurrently --handle-input "wait-on dist/main.js && nodemon" "tsc -w -p tsconfig.build.json" ", "start:debug": "nodemon --config nodemon-debug.json", "start:dist": "node dist/main.js", "pm2:prd": "pm2 start ./bin/app.config.js --env production", "pm2:preprd": "pm2 start ./bin/app.config.js --env preproduction", "pm2:deve": "pm2 start ./bin/app.config.js --env development", "pm2:stop": "pm2 stop youtu-service", "pm2:restart": "pm2 restart youtu-service", "pm2:delete": "pm2 delete youtu-service", "lint": "eslint ‘src/**/*.{ts,js}‘ --fix", "lint:ts": "tslint -p tsconfig.json -c tslint.json", "test": "jest", "test:watch": "jest --watch", "test:cov": "jest --coverage", "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand", "test:e2e": "jest --config ./test/jest-e2e.json", "docs": "compodoc -p tsconfig.json -s" }, "devDependencies": { "@nestjs/testing": "^6.3.2", "@types/es6-shim": "^0.31.39", "@types/express": "^4.17.0", "@types/jest": "^24.0.15", "@types/lodash": "^4.14.135", "@types/node": "^12.0.10", "@types/supertest": "^2.0.7", "@typescript-eslint/eslint-plugin": "^1.11.0", "@typescript-eslint/parser": "^1.11.0", "concurrently": "^4.1.1", "eslint": "^6.0.1", "eslint-config-prettier": "^6.0.0", "eslint-config-standard": "^12.0.0", "eslint-plugin-import": "^2.18.0", "eslint-plugin-node": "^9.1.0", "eslint-plugin-prettier": "^3.1.3", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.0", "jest": "^24.8.0", "nodemon": "^1.19.1", "prettier": "^1.18.2", "rimraf": "^2.6.3", "supertest": "^3.4.2", "ts-jest": "^23.10.5", "ts-loader": "^4.5.0", "ts-node": "^7.0.1", "tsconfig-paths": "^3.8.0", "tslint": "^5.11.0", "tslint-config-prettier": "^1.18.0", "typescript": "^3.7.3", "wait-on": "^3.2.0" }, "engines": { "node": ">=8.9.0" }, "jest": { "moduleFileExtensions": [ "js", "json", "ts" ], "rootDir": "src", "testRegex": ".spec.ts$", "transform": { "^.+\.(t|j)s$": "ts-jest" }, "collectCoverageFrom": [ "**/*.(t|j)s" ], "coverageDirectory": "../coverage", "testEnvironment": "node" }
以上是关于vscode配置typescript和eslint的环境的主要内容,如果未能解决你的问题,请参考以下文章
使用 typescript-eslint 在 VSCode 编辑器中未显示 Typescript 错误
VS Code + ESLint + Prettier + Google Style + Typescript
Yarn 3.x PNP typescript CRA eslint 不适用于 VSCode
仅为 TS/TSX 文件删除 CR - VSCode 1.46 上的 Prettier ESLint
如何在 VS Code 编辑器中使用 ESLint + Airbnb 规则 + TypeScript + Stylelint 为 SCSS 配置 Vue CLI 4,并在保存时自动修复?