Parsing error: Unexpected token =

• ESLint標準のパーサーでは、まだ標準化されていないクラスフィールド構文は扱えないため、babel-eslintを追加すると解消できる。
• npm install babel-eslint --save-dev
• {
"parser": "babel-eslint",
// そのた設定
}

[eslint] ‘App’ is defined but never used.

import App from './components/App';

ReactDOM.render(<App />, document.querySelector('.container'));

• import App from './components/App'; Appにエラー

 ecmaFeatures: {
    jsx: true,
 },`
 plugins: ['react'],
 rules: {
    'react/jsx-uses-react': 1,
    'react/jsx-uses-vars': 1,
 ・ 
 ・
 ・

• ESLintは標準パッケージでjsxをサポートしてるが、React独自の部分はサポート外となっている。pluginでカバー

[eslint] ‘require’ is not defined.

[eslint] ‘__dirname’ is not defined.

[eslint] ‘module’ is not defined.

• webpack.config.jsで上記３つのeslintのチェックでひっかかる。env設定でnodeとamdを追加すればOK

  env: {
    browser: true,
    node: true,  // 追加
    amd: true,   // 追加
  },

• envの設定
  • browser : ブラウザのグローバル変数
  • node : nodeのグローバル変数とnode特有のルール
  • amd : define()とrequire()をグローバル変数として定義
  • mocha : mochaのグローバル変数

target: ‘node’

• Reactでdotenvを追加して使おうとしたら、ビルドでエラー、dotenvのパッケージないでfsがないと怒られている。fsを追加したがエラーのまま。

ERROR in ./node_modules/dotenv/lib/main.js
    Module not found: Error: Can't resolve 'fs' in '/Users/ka-yamao/workspace/udemy_react/node_modules/dotenv/lib'
     @ ./node_modules/dotenv/lib/main.js 24:11-24
     @ ./src/index.jsx
     @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.jsx

• パッケージがnode.jsのランタイムが必要なときは、webpack.config.jsに設定が必要みたい

module.exports = {
  target: 'node'
};

https://webpack.js.org/concepts/targets/

[tslint] All ‘id’ signatures should be adjacent

export class Test {
    constructor(private _id: number, private _name: string) {}
    get id(): number {
        return this.id;
    }
    get name(): string {
        return this._name;
    }
    set name(name: string) {
        this._name = name;
    }
    set id(id: number) {  // ★ [tslint] All 'id' signatures should be adjacent
        this._id = id;
    }
}

• getter,setterは近くに書いた方が可読性が上がるよということらしい。get id()のすぐしたにset id()を書くように修正したらtslintで怒られなくなった。