LoginSignup
134

More than 3 years have passed since last update.

posted at

updated at

AtomでTypeScriptの環境を構築する

TypeScriptのプラグインをインストール

atom-typescriptをインストール

atom-typescript
https://github.com/TypeStrong/atom-typescript

ターミナルで以下のコマンドを入力
インストールに結構時間がかかるので気長に待ってください。

$ apm install atom-typescript

プロジェクトのルートにtsconfig.jsonファイルを作成

tsconfig.jsonにjsにコンパイルする際の設定を記述します。
compileOnSaveをtrueに指定すると、保存と同時にjsファイルにコンパイルしてくれます。gulpやgruntで自動コンパイルする場合は、falseにしてください。

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": false,
    "noLib": false,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "formatCodeOptions": {
    "indentSize": 4,
    "tabSize": 4,
    "newLineCharacter": "\r\n",
    "convertTabsToSpaces": true,
    "insertSpaceAfterCommaDelimiter": true,
    "insertSpaceAfterSemicolonInForStatements": true,
    "insertSpaceBeforeAndAfterBinaryOperators": true,
    "insertSpaceAfterKeywordsInControlFlowStatements": true,
    "insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
    "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
    "placeOpenBraceOnNewLineForFunctions": true,
    "placeOpenBraceOnNewLineForControlBlocks": true
  },
  "compileOnSave": true,
  "filesGlob": [
    "./**/*.ts",
    "!./node_modules/**/*.ts",
    "!./bower_components/**/*.ts",
    "!./typings/**/*.ts"
  ],
  "files": [
    "./test.ts"
  ]
}

構文チェック

Linterをインストール

Linter
https://github.com/AtomLinter/Linter

ターミナルで以下のコマンドを入力

$ apm install linter

tslintをインストール

tslint
https://github.com/palantir/tslint

ターミナルで以下のコマンドを入力

$ npm install -g tslint
$ apm install linter-tslint

プロジェクトのルートにtslint.jsonファイルを作成

tslint.jsonにtypescriptを構文チェックする各種設定を記述します。

tslint.json
{
  "rules": {
    "class-name": true,
    "curly": true,
    "eofline": false,
    "forin": true,
    "indent": [true, "spaces"],
    "label-position": true,
    "label-undefined": true,
    "max-line-length": [true, 140],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-key": true,
    "no-duplicate-variable": true,
    "no-empty": true,
    "no-eval": true,
    "no-string-literal": false,
    "no-switch-case-fall-through": true,
    "no-trailing-comma": true,
    "no-trailing-whitespace": true,
    "no-unused-expression": true,
    "no-unused-variable": true,
    "no-unreachable": true,
    "no-use-before-declare": true,
    "one-line": [true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "quotemark": [true, "single"],
    "radix": false,
    "semicolon": true,
    "triple-equals": [true, "allow-null-check"],
    "variable-name": false,
    "whitespace": [true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ]
  }
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
134