npm-scripts で静的サイトの制作環境を構築 (3) (改)

yarn add pug-lint --dev

{
  // Control whether pug-lint is enabled for Pug/Jade files or not.
  "puglint.enable": true
}

yarn add prettier --dev

yarn add eslint --dev

.\node_modules\.bin\eslint --init

? How would you like to configure ESLint?
  Use a popular style guide
> Answer questions about your style
  Inspect your JavaScript file(s)

? Which style guide do you want to follow? (Use arrow keys)
> Airbnb (https://github.com/airbnb/javascript)
  Standard (https://github.com/standard/standard)
  Google (https://github.com/google/eslint-config-google)

? Do you use React? (y/N)

? What format do you want your config file to be in?
> JavaScript
  YAML
  JSON

Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0
? Would you like to install them now with npm? (Y/n)

Successfully created .eslintrc.js file in プロジェクト・フォルダのパス

yarn add eslint-config-airbnb-base eslint-plugin-import --dev

yarn add eslint-plugin-prettier --dev

yarn add eslint-config-prettier --dev

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: ["airbnb-base", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: 6,
  },
  rules: {
    "prettier/prettier": [
      "error",
      {
        arrowParens: "always",
        singleQuote: true,
        trailingComma: "es5",
      },
    ],
  },
};

yarn add stylelint --dev

yarn add stylelint-config-standard --dev

yarn add stylelint-order stylelint-config-rational-order --dev

yarn add stylelint-prettier --dev

yarn add stylelint-config-prettier --dev

module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-rational-order",
    "stylelint-prettier/recommended",
  ],
  rules: {
    "at-rule-no-vendor-prefix": true,
    "media-feature-name-no-vendor-prefix": true,
    "property-no-vendor-prefix": true,
    "selector-no-vendor-prefix": true,
    "value-no-vendor-prefix": true,
  },
};

{
  // JavaScript の検証を有効/無効にします。
  "javascript.validate.enable": false,

  // CSSの検証を有効または無効にします。
  "css.validate": false,

  // LESSの検証を有効または無効にします。
  "less.validate": false,

  // PostCSSの検証を有効または無効にします。
  "postcss.validate": false,

  // SCSSの検証を有効または無効にします。
  "scss.validate": false,

  // JavaScript
  "[javascript]": {
    // ファイルを保存するときにフォーマットする。
    "editor.formatOnSave": false
  },

  // CSS
  "[css]": {
    // ファイルを保存するときにフォーマットする。
    "editor.formatOnSave": false
  },

  // LESS
  "[less]": {
    // ファイルを保存するときにフォーマットする。
    "editor.formatOnSave": false
  },

  // PostCSS
  "[postcss]": {
    // ファイルを保存するときにフォーマットする。
    "editor.formatOnSave": false
  },

  // SCSS
  "[scss]": {
    // ファイルを保存するときにフォーマットする。
    "editor.formatOnSave": false
  },

  // 保存時に実行されるコードアクションの種類
  "editor.codeActionsOnSave": {
    // 保存時にESLintの自動補正を有効または無効にします。
    "source.fixAll.eslint": true,
    // 保存時にstylelintの自動補正を有効または無効にします。
    "source.fixAll.stylelint": true
  }
}