eslintやtslintのメモ

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で上記3つの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で怒られなくなった。