JS開発環境構築1

JSの開発環境を揃えてみます。

Overview

  • VScode ESLintExtention
  • ESlint
  • VScodeでJavascriptデバッグ

Input

(VScode Extention)ESLint
ESLint
Visual Studio CodeでのJSのデバッグ方法(2018年版)
(VScode Extention)Debugger for Chrome
eslintrcの記述全体(これはenvについて参考)
eslintrcのrulesの一つ一つの設定
Step by Stepで始めるESLint
eslint-config-google

Proccess

  1. (VScode Extention)ESLint install
  2. ESLint install
  3. ESLint 使ってみる
  4. JSのデバッグ

(VScode Extention)ESLint install

(VScode Extention)ESLint
からInstall

ESLint install

npmでインストール

froggugugugu$ npm install -g eslint
/Users/froggugugugu/.nodebrew/node/v8.0.0/bin/eslint -> /Users/froggugugugu/.nodebrew/node/v8.0.0/lib/node_modules/eslint/bin/eslint.js
+ eslint@5.15.2
added 117 packages from 70 contributors in 9.951s
froggugugugu$ eslint -v
v5.15.2
froggugugugu$ mkdir eslinttest && cd $_
froggugugugu$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (eslinttest) eslinttest
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/froggugugugu/Development/eslinttest/package.json:

{
  "name": "eslinttest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

froggugugugu$ eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
? What format do you want your config file to be in? JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint@latest
? Would you like to install them now with npm? Yes
Installing eslint@latest
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN eslinttest@1.0.0 No description
npm WARN eslinttest@1.0.0 No repository field.

+ eslint@5.15.2
added 117 packages from 70 contributors and audited 184 packages in 9.611s
found 0 vulnerabilities

Successfully created .eslintrc.js file in /Users/froggugugugu/Development/eslinttest
ESLint was installed locally. We recommend using this local copy instead of your globally-installed copy.

Jasmineの実装がESlintに引っかかってしまうので設定を追加

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "jasmine": true // ★これ追加
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
        // enable additional rules
        "indent": ["error", 2],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "single"],
        "semi": ["error", "always"],

        "block-spacing": "error",

        // override default options for rules from base configurations
        "comma-spacing": ["error", { "before": false, "after": true }],
        "comma-style": ["error", "last"],
        "guard-for-in": "error",
        "no-cond-assign": ["error", "always"],

        // ブレーススタイル
        "brace-style": ["error", "stroustrup", { "allowSingleLine": true }],

        // disable rules from base configurations
        "no-console": "off",
        "no-alert": "off",
    }};

ESLint使ってみる

Jasmineのサンプルを持ってきてかけてみます。

(function(global){
  // 'use strict'; // user strictなくして見る
  function TargetClass() {
  }
  TargetClass.prototype.getStringVal = function(){
    return "expected'; // ダブルクォートとシングルクォート
  }
  TargetClass.prototype.getIntVal = function() {
    return 987.6543.210; // ドット2つ入れてみる
  }
  TargetClass.prototype.getObjVal = function() {
    return {"foo" ['bar', 'baz']}; // コロン抜いてみる
  }
  TargetClass.prototype.getArrayVal = function() {
    return 10,20,30]; // 開始のブラケット抜いてみる
  }
  TargetClass.prototype.getDefinedVal = function() {
    //return this.getStringVal();
    this.getStringVal(); //return 抜いてみる
  }
  TargetClass.prototype.getGtVal = function) { // 開始のパーレン抜いてみる
    return 4;
  }
  TargetClass.prototype.getGtEqVal = function() // 開始のブレース抜いてみる
    return 25;
  }
  TargetClass.prototype.getLtVal = function() {
    return -1 // セミコロン抜いて見る文法的には通っちゃう
  }
  TargetClass.prototype.getLtEqVal = function() {
      return 123; // indent 4スペにしてみる
  }
  global['TargetClass'] = TargetClass;
})(this);

froggugugugu$ eslint TargetClass.js 

/Users/froggugugugu/Development/eslinttest/TargetClass.js
  6:12  error  Parsing error: Unterminated string constant

✖ 1 problem (1 error, 0 warnings)

~~~ 
VSCodeのProblemにもESLintで引っかかった情報が表示されるようになりました。
まとめて出るわけじゃなくて一個づつ引っかかってれくれます。

ESLint のルールはかなり細かいのでひとまずGoogleのを継承しておく

froggugugugu$ npm install --save-dev eslint eslint-config-google
npm WARN eslinttest@1.0.0 No repository field.

+ eslint-config-google@0.12.0
+ eslint@5.15.2
added 1 package from 1 contributor, updated 1 package and audited 185 packages in 4.393s
found 0 vulnerabilities
module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "jasmine": true 
    },
    "extends": ["eslint:recommended", "google"] // 配列にしてgoogle追加する
    ...

JSのデバッグ

(VScode Extention)Debugger for Chrome からInstall

  • 試しにJasmineのテンプレ持ってきて試してみる。
▾ eslinttest/
  ▾ .vscode/
      launch.json ... こいつを作っておく
  ▸ lib/
  ▸ node_modules/
  ▾ spec/
      TemplateCodeSpec.js ... テスト
  ▾ src/
      TargetClass.js ... 実装
    .eslintrc.js
    launch.json 
    MIT.LICENSE
    package-lock.json
    package.json
    README.md
    SpecRunner.html
  • .vscodeフォルダ配下に launch.json が必要
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceFolder}/SpecRunner.html"
        },
    ]
}

Terminalからリモートデバッグモードで起動するってあったけど、ひとまずVSCodeのデバグ実行から実行するとChromeが起動してブレークポイントで止まりました。

Output

  • Extensionのインスコ(ESLint, Debugger for Chrome)
  • npm init でpackage.json作る
  • eslint --init で.eslintrc.json 作ろう (作ってあればそれをいじる)
  • .vscode フォルダほって、launch.json を作ろう(ない状態で実行すればデフォでできる)(作ってあればそれをいじる)
  • あとはESLintのルールサイト見ておけばそのプロジェクトごとのルールに合わせて調整できるかと思う。

  • PHP開発環境構築1 Prev
  • VSCodeとVimとNERDTree Next