programming hyodoblog

はじめましてこんにちは、ひょうどうです。

今回は、Node.js + TypeScript + Eslint + Prettierで開発するときの環境構築を紹介します。

ライブラリの追加

npm i --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-prettier prettier typescript
or
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-airbnb-base eslint-config-prettier eslint-plugin-prettier prettier typescript

ファイルの作成

.eslintrc.json

{
  "env": {
      "browser": true,
      "es2020": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
      "ecmaVersion": 11,
      "sourceType": "module"
  },
  "plugins": [
      "@typescript-eslint",
      "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "semi": ["error", "never", {"beforeStatementContinuationChars": "never"}],
    "semi-spacing": ["error", {"after": true, "before": false}],
    "semi-style": ["error", "first"],
    "no-extra-semi": "error",
    "no-unexpected-multiline": "error",
    "no-unreachable": "error",
    "@typescript-eslint/no-explicit-any": 0
  }
}

.prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "arrowParens": "always",
  "semi": false,
  "singleQuote": true
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "dist",
    "sourceMap": true,
    "strict": true,
    "target": "ES2020"
  },
  "compileOnSave": true,
  "include": [
    "src"
  ]
}

tslint.json

{
  "rules": {
      "adjacent-overload-signatures": true,
      "member-access": true,
      "member-ordering": [ true, { "order": [ "static-field", "instance-field", "constructor" ]}],
      "no-any": true,
      "no-empty-interface": true,
      "no-import-side-effect": true,
      "no-inferrable-types": true,
      "no-internal-module": true,
      "no-magic-numbers": true,
      "no-namespace": true,
      "no-non-null-assertion": true,
      "no-reference": true,
      "no-unnecessary-type-assertion": true,
      "no-var-requires": true,
      "only-arrow-functions": [ true ],
      "prefer-for-of": true,
      "promise-function-async": true,
      "typedef": [
          true,
          "call-signature",
          "arrow-call-signature",
          "parameter",
          "arrow-parameter",
          "property-declaration",
          "variable-declaration",
          "member-variable-declaration",
          "object-destructuring",
          "array-destructuring"
      ],
      "typedef-whitespace": [
          true,
          { "call-signature": "nospace", "index-signature": "nospace", "parameter": "nospace", "property-declaration": "nospace", "variable-declaration": "nospace" },
          { "call-signature": "onespace", "index-signature": "onespace", "parameter": "onespace", "property-declaration": "onespace", "variable-declaration": "onespace" }
      ],
      "unified-signatures": true,
      "await-promise": true,
      "curly": [ true, "ignore-same-line" ],
      "forin": true,
      "import-blacklist": true,
      "label-position": true,
      "no-arg": true,
      "no-bitwise": true,
      "no-conditional-assignment": true,
      "no-console": [ "debug", "error", "info", "trace", "warn" ],
      "no-construct": true,
      "no-debugger": true,
      "no-duplicate-super": true,
      "no-duplicate-variable": [ true, "check-parameters" ],
      "no-empty": true,
      "no-eval": true,
      "no-floating-promises": true,
      "no-for-in-array": true,
      "no-inferred-empty-object-type": true,
      "no-invalid-template-strings": true,
      "no-invalid-this": [ true, "check-function-in-method" ],
      "no-misused-new": true,
      "no-null-keyword": true,
      "no-object-literal-type-assertion": true,
      "no-shadowed-variable": true,
      "no-sparse-arrays": true,
      "no-string-literal": true,
      "no-string-throw": true,
      "no-submodule-imports": true,
      "no-switch-case-fall-through": true,
      "no-this-assignment": true,
      "no-unbound-method": true,
      "no-unsafe-any": true,
      "no-unsafe-finally": true,
      "no-unused-expression": true,
      "no-unused-variable": true,
      "no-use-before-declare": true,
      "no-var-keyword": true,
      "no-void-expression": [ true, "ignore-arrow-function-shorthand" ],
      "prefer-conditional-expression": [ true, "check-else-if" ],
      "prefer-object-spread": true,
      "radix": true,
      "restrict-plus-operands": true,
      "strict-boolean-expressions": true,
      "strict-type-predicates": true,
      "switch-default": true,
      "triple-equals": true,
      "typeof-compare": true,
      "use-default-type-parameter": true,
      "use-isnan": true,
      "cyclomatic-complexity": [ true, 6 ],
      "deprecation": true,
      "eofline": true,
      "indent": [ true, "spaces", 4 ],
      "linebreak-style": [ true, "LF" ],
      "max-classes-per-file": [ true, 1 ],
      "max-file-line-count": [ true, 300 ],
      "max-line-length": [ true, 120 ],
      "no-default-export": true,
      "no-duplicate-imports": true,
      "no-mergeable-namespace": true,
      "no-require-imports": true,
      "object-literal-sort-keys": true,
      "prefer-const": true,
      "trailing-comma": [ true, { "multiline": "never", "singleline": "never" }],
      "align": [ true, "parameters", "arguments", "statements", "members", "elements" ],
      "array-type": [ true, "array" ],
      "arrow-parens": [ true, "ban-single-arg-parens" ],
      "arrow-return-shorthand": [ true, "multiline" ],
      "binary-expression-operand-order": true,
      "callable-types": true,
      "class-name": true,
      "comment-format": [ true, "check-space", "check-uppercase" ],
      "completed-docs": [ true ],
      "encoding": true,
      "file-header": [ true, "Copyright \\d{4}" ],
      "import-spacing": true,
      "interface-name": [ true, "never-prefix" ],
      "interface-over-type-literal": true,
      "jsdoc-format": true,
      "match-default-export-name": true,
      "newline-before-return": true,
      "new-parens": true,
      "no-angle-bracket-type-assertion": true,
      "no-boolean-literal-compare": true,
      "no-consecutive-blank-lines": [ true, 2 ],
      "no-irregular-whitespace": true,
      "no-parameter-properties": true,
      "no-reference-import": true,
      "no-trailing-whitespace": true,
      "no-unnecessary-callback-wrapper": true,
      "no-unnecessary-initializer": true,
      "no-unnecessary-qualifier": true,
      "number-literal-format": true,
      "object-literal-key-quotes": [ true, "always" ],
      "object-literal-shorthand": true,
      "one-line": [ true, "check-catch", "check-finally", "check-else", "check-open-brace", "check-whitespace" ],
      "one-variable-per-declaration": [ true, "ignore-for-loop" ],
      "ordered-imports": true,
      "prefer-function-over-method": true,
      "prefer-method-signature": true,
      "prefer-switch": true,
      "prefer-template": [ true, "allow-single-concat" ],
      "quotemark": [ true, "single", "avoid-template", "avoid-escape" ],
      "return-undefined": true,
      "semicolon": [ false, "always" ],
      "space-before-function-paren": [ true, "never" ],
      "space-within-parens": 0,
      "switch-final-break": [ true, "always" ],
      "type-literal-delimiter": true,
      "variable-name": [ true, "check-format", "ban-keywords" ],
      "whitespace": [ true, "check-branch", "check-decl", "check-operator", "check-module", "check-separator", "check-type", "check-typecast", "check-preblock" ]
  },
  "defaultSeverity": "error"
}

package.jsonの修正

scriptに以下のコードを追加する。

"lint": "eslint --ext .ts,.tsx ./src",
"lintfix": "eslint --ext .ts,.tsx ./src --fix",

こうすることで、

npm run lintfix
or
yarn lintfix

これでコードを整形することができる。

 

それではまたどこかでお会いしましょう!

Twitterでフォローしよう

おすすめの記事