インストールMemo

[準備]
sudo apt install nodejs npm
sudo npm instal -g n
n --stable
sudo npm install yarn

[パスを通す]
export PATH=$PATH:./node_modules/.bin

[lintとformat]
// eslint
・eslint
・eslint-plugin-import
・eslint-config-prettier
// prettier
・prettier
・prettier-eslint

[webpack]
・webpack
・webpack-cli

[ローダー]
・babel-loader
・eslint-loader

[インストール]
yarn add --dev eslint eslint-config-prettier eslint-plugin-import eslint-plugin-prettier prettier prettier-eslint webpack webpack-cli babel-loader  @babel/core @babel/preset-env eslint-loader 

.eslintrc

{
  "parserOptions": {
    "ecmaVersion": 2017,
    "sourceType": "module"
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "extends": ["plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"],
    "no-unused-vars": "warn"
  }
}

.pretteirrc

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

webpack.config.js

// プラグインを利用するためにwebpackを読み込んでおく
const webpack = require('webpack');

// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');

module.exports = {
  // mode: モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
  // development　デバッグを表示してくれる
  // production ファイルの圧縮やモジュールの最適化などの設定が有効になる(本番時はこれ)
  // modeはwebpack.configではなく
  // package.jsonのscriptに記述することで
  // モード変更時の編集の手間を減らせる 
  //mode: 'development',
  // エントリーポイントの設定
  entry: './bin/www',
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: 'bundle.js',
    // 出力先のパス（絶対パスを指定する必要がある）
    path: path.join(__dirname, './bin'),
  },
  // ローダーの設定
  module: {
    rules: [
      {
        // ローダーの処理対象ファイル
        test: /\.js$/,
        // ローダーの処理対象から外すディレクトリ
        exclude: /node_modules/,
        use: [
          {
            // 利用するローダー
            loader: 'babel-loader',
            // ローダーのオプション
            // 今回はbabel-loaderを利用しているため
            // babelのオプションを指定しているという認識で問題ない
            options: {
              presets: [['@babel/preset-env', { modules: false }]],
            },
          },
        ],
      },
      {
        // enforce: 'pre'を指定することによって
        // enforce: 'pre'がついていないローダーより早く処理が実行される
        // 今回はbabel-loaderで変換する前にコードを検証したいため、指定が必要
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
    ],
  },
};

[vscode]settings.json

// ==== html ===========================================================
    "html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p", // フォーマットしないタグ
    "html.format.extraLiner": "", // headとbody要素の調節
    "html.format.preserveNewLines": false, // 指定タグ間にスペースを入れない
    "html.format.indentInnerHtml": true, // headとbodyをインデントする 
    "html.format.unformatted": null, //　再フォーマットしてはならないタグ 
    // === json
    "json.maxItemsComputed": 10000,
    // ==== javascript =====================================================
    "[javascript]": {
        "editor.tabSize": 2,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // === pretteir ========================================================
    "prettier.singleQuote": true,
    "prettier.tabWidth": 2,
    // ==== ESLint =========================================================
    "eslint.enable": true,
    "eslint.packageManager": "npm",
    "eslint.nodePath": "./node_modules",
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    },