[LINUX] Installieren Sie Memo

python

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

[Durchlaufen]
export PATH=$PATH:./node_modules/.bin

[Flusen und Format]
// eslint
・ Eslint
・ Eslint-plugin-import
・ Eslint-config-prettier
// prettier
・ Schöner
・ Schöner-eslint

[webpack]
・ Webpack
・ Webpack-cli

[Lader]
・ 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

//Laden Sie das Webpack, um das Plug-In zu verwenden
const webpack = require('webpack');

// output.Laden Sie das Pfadmodul, da für den Pfad ein absoluter Pfad angegeben werden muss
const path = require('path');

module.exports = {
  // mode:Wenn Sie die Moduseinstellung v4 oder höher nicht angeben, wird beim Ausführen des Webpacks eine Warnung angezeigt.
  //Entwicklung Zeigt Debug
  //Einstellungen wie die Komprimierung von Produktionsdateien und die Moduloptimierung sind aktiviert(Dies zum Zeitpunkt der Produktion)
  //Modus ist Webpack.Nicht config
  // package.Indem Sie in jsons Skript schreiben
  //Sie können den Bearbeitungsaufwand reduzieren, wenn Sie den Modus ändern
  //mode: 'development',
  //Einstiegspunkteinstellung
  entry: './bin/www',
  //Ausgabeeinstellungen
  output: {
    //Name der Ausgabedatei
    filename: 'bundle.js',
    //Ausgabezielpfad (absoluter Pfad muss angegeben werden)
    path: path.join(__dirname, './bin'),
  },
  //Loader-Einstellungen
  module: {
    rules: [
      {
        //Datei, die vom Loader verarbeitet werden soll
        test: /\.js$/,
        //Verzeichnisse, die von der Loader-Verarbeitung ausgeschlossen sind
        exclude: /node_modules/,
        use: [
          {
            //Lader zu verwenden
            loader: 'babel-loader',
            //Ladeoptionen
            //Diesmal babel-Weil es Lader verwendet
            //Es ist kein Problem zu erkennen, dass Sie die Option babel angeben
            options: {
              presets: [['@babel/preset-env', { modules: false }]],
            },
          },
        ],
      },
      {
        // enforce: 'pre'Durch Angabe
        // enforce: 'pre'Die Verarbeitung erfolgt schneller als ein Lader ohne
        //Diesmal babel-Muss angegeben werden, da wir den Code vor der Konvertierung mit Loader validieren möchten
        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", //Unformatierte Tags
    "html.format.extraLiner": "", //Einstellung von Kopf- und Körperelementen
    "html.format.preserveNewLines": false, //Setzen Sie kein Leerzeichen zwischen die angegebenen Tags
    "html.format.indentInnerHtml": true, //Kopf und Körper einrücken
    "html.format.unformatted": null, //Tags, die nicht reformiert werden sollten
    // === 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,
    },