[LINUX] Install Memo

python

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

[Pass through]
export PATH=$PATH:./node_modules/.bin

[lint and format]
// eslint
・ Eslint
・ Eslint-plugin-import
・ Eslint-config-prettier
// prettier
・ Prettier
・ Prettier-eslint

[webpack]
・ Webpack
・ Webpack-cli

[Loader]
・ Babel-loader
・ Eslint-loader

[Installation]
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
}

javascript:webpack.config.js

//Load webpack to use the plugin
const webpack = require('webpack');

// output.Since it is necessary to specify an absolute path for path, load the path module
const path = require('path');

module.exports = {
  // mode:If you do not specify the mode setting, v4 or later mode, a warning will appear when executing webpack
  //development Shows debug
  //Settings such as production file compression and module optimization are enabled(This at the time of production)
  //mode is webpack.Not config
  // package.By writing in json script
  //You can reduce the editing effort when changing modes.
  //mode: 'development',
  //Entry point setting
  entry: './bin/www',
  //Output settings
  output: {
    //File name to output
    filename: 'bundle.js',
    //Output destination path (absolute path must be specified)
    path: path.join(__dirname, './bin'),
  },
  //Loader settings
  module: {
    rules: [
      {
        //Files to be processed by the loader
        test: /\.js$/,
        //Directories to exclude from loader processing
        exclude: /node_modules/,
        use: [
          {
            //Loader to use
            loader: 'babel-loader',
            //Loader options
            //This time babel-Because it uses loader
            //There is no problem in recognizing that you are specifying the babel option
            options: {
              presets: [['@babel/preset-env', { modules: false }]],
            },
          },
        ],
      },
      {
        // enforce: 'pre'By specifying
        // enforce: 'pre'Processing is executed faster than a loader without
        //This time babel-Need to specify because we want to validate the code before converting with 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", //Unformatted tags
    "html.format.extraLiner": "", //Adjustment of head and body elements
    "html.format.preserveNewLines": false, //Do not put a space between specified tags
    "html.format.indentInnerHtml": true, //Indent head and body
    "html.format.unformatted": null, //Tags that should not be reformatted
    // === 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,
    },