[LINUX] Installer Memo

python

[Préparation]
sudo apt install nodejs npm
sudo npm instal -g n
n --stable
sudo npm install yarn

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

[peluches et format]
// eslint
・ Eslint
・ Eslint-plugin-import
・ Eslint-config-prettier
// prettier
· Plus jolie
· Plus jolie-eslint

[webpack]
・ Webpack
・ Webpack-cli

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

//Chargez Webpack pour utiliser le plug-in
const webpack = require('webpack');

// output.Puisqu'il est nécessaire de spécifier un chemin absolu pour le chemin, chargez le module chemin
const path = require('path');

module.exports = {
  // mode:Si vous ne spécifiez pas le paramètre de mode, v4 ou mode ultérieur, un avertissement apparaîtra lors de l'exécution de Webpack.
  //développement Affiche le débogage
  //Les paramètres tels que la compression des fichiers de production et l'optimisation des modules sont activés(Ceci au moment de la production)
  //le mode est Webpack.Pas de configuration
  // package.En écrivant dans le script de json
  //Vous pouvez réduire l'effort d'édition lors du changement de mode
  //mode: 'development',
  //Réglage du point d'entrée
  entry: './bin/www',
  //Paramètres de sortie
  output: {
    //Nom du fichier de sortie
    filename: 'bundle.js',
    //Chemin de destination de sortie (le chemin absolu doit être spécifié)
    path: path.join(__dirname, './bin'),
  },
  //Paramètres du chargeur
  module: {
    rules: [
      {
        //Fichier à traiter par le chargeur
        test: /\.js$/,
        //Répertoires exclus du traitement du chargeur
        exclude: /node_modules/,
        use: [
          {
            //Chargeur à utiliser
            loader: 'babel-loader',
            //Options du chargeur
            //Cette fois babel-Parce qu'il utilise un chargeur
            //Il n'y a aucun problème à reconnaître que vous spécifiez l'option babel
            options: {
              presets: [['@babel/preset-env', { modules: false }]],
            },
          },
        ],
      },
      {
        // enforce: 'pre'En spécifiant
        // enforce: 'pre'Le traitement est exécuté plus rapidement qu'un chargeur sans
        //Cette fois babel-Besoin de préciser car nous voulons valider le code avant de convertir avec 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", //Balises non formatées
    "html.format.extraLiner": "", //Réglage des éléments de la tête et du corps
    "html.format.preserveNewLines": false, //Ne mettez pas d'espace entre les balises spécifiées
    "html.format.indentInnerHtml": true, //Indenter la tête et le corps
    "html.format.unformatted": null, //Balises qui ne devraient pas être réformées
    // === 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,
    },