寝て起きて寝て

プログラミングが出来ない情報系のブログ

Vue環境のフォーマットを設定し開発する

自分用のメモ

何をしたいか

人によってバラバラな書き方でコードが見にくいから自動的にフォーマットすることで、
統一し差異を無くしたい

環境

Mac
Visual Studio Code
"eslint": "^7.23.0",
"@vue/eslint-config-prettier": "^6.0.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.8.0",
"prettier": "^2.2.1",
"stylelint": "^13.12.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^21.0.0",
"stylelint-order": "^4.1.0",

(めんどくさくてpackage.jsonの中身直書き)

手順

vue create は済ませておく

必要なものをインストール

VScode 拡張機能

Vetur
ESLint
stylelint
Prettier
EditorConfig

必要なパッケージをインストール

とりあえず拡張機能を入れているものを一式

$ yarn add -D prettier stylelint eslint

次に設定とプラグイン周りを追加

yarn add -D @vue/eslint-config-prettier eslint-plugin-prettier stylelint-config-prettier　eslint-plugin-vue stylelint-config-standard stylelint-order

eslint-config-prettier： ESLint と Prettier の競合する箇所をオフにしてくれる
stylelint-config-prettier：stylelint と Prettier の競合する箇所をオフにしてくれる
eslint-plugin-prettier： Prettier の問題を ESLint の問題として報告してくれるようにする
eslint-plugin-vue：.vue ファイルを静的検証するための ESLint Plugin
stylelint-config-standard：世界で標準的なスタイルガイドを参考にした config
stylelint-order：アルファベット順に自動整形してくれる

typescript を使用するなら

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript

@typescript-eslint/eslint-plugin:ESLint が TypeScript にも対応されるようにする
@typescript-eslint/parser:構文解析用
@vue/eslint-config-typescript:vue ファイル用のプラグイン

設定

jsconfig.json

jsconfig.json をプロジェクト直下に作成
コメントアウトしているのはプロジェクトによっては影響がでかそうなものと、
typescript 関係のもの

https://www.typescriptlang.org/ja/tsconfig

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "strict": true,
    "jsx": "preserve",
    // "allowJs": true,
    // "esModuleInterop": true,
    // "allowSyntheticDefaultImports": true,
    // "sourceMap": true,
    // "baseUrl": ".",
    "outDir": "dist"
    // "paths": {
    //   "@/*": ["./src/*"]
    // },
    // "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "exclude": ["dist", "node_modules", "public"]
}

恐ければ、公式あるこれだけでいいかも

{
  "include": ["./src/**/*"]
}

setting.json

vscode の設定ファイルに追記
保存時に整形＋ prettier でフォーマットするようにする

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.formatOnPaste": true,

  // "typescript.tsdk": "node_modules/typescript/lib",

  // "vetur.experimental.templateInterpolationService": true,  // 現在プロトバージョンでプロジェクトによっては結構重くなる
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "editor.formatOnSave": true
}

.eslintrc.js

公式
公式リポジトリ（日本語版）

真面目に設定しようとすると x ぬのでESLint のルールを全部手動で設定するのは大変だからやめておけコロナビールが飲めるかもしれない
.eslintrc.jsをプロジェクト直下に作成

module.exports = {
  //親階層は見ない
  root: true,

  //Node.js で実行されるコードを静的検証する
  env: {
    node: true,
  },

  //プラグイン導入
  extends: ['plugin:vue/recommended', 'eslint:recommended', '@vue/prettier'], //typescriptも必要なら '@vue/typescript' を追記

  // typescriptを読み込む
  // parserOptions: {
  //   parser: '@typescript-eslint/parser',
  // },

  rules: {
    //自動修正されないものは error にしている
    // https://eslint.org/docs/rules/#ecmascript-6
    'object-shorthand': 'warn',
    'symbol-description': 'error',

    // https://eslint.vuejs.org/rules/#uncategorized
    'vue/component-definition-name-casing': 'warn',
    'vue/component-name-in-template-casing': 'warn',
    'vue/component-tags-order': ['error', { order: ['template', 'script', 'style'] }],
    'vue/no-deprecated-scope-attribute': 'warn', //2.6.0以降では非推奨の書き方
    'vue/no-deprecated-slot-attribute': 'warn', //2.6.0以降では非推奨の書き方
    'vue/no-deprecated-slot-scope-attribute': 'warn', //2.6.0以降では非推奨の書き方
    'vue/v-on-function-call': 'warn',
    'vue/v-slot-style': 'warn',
    'vue/valid-v-slot': 'error',
  },

  // overrides: [
  //   {
  //     files: ['*.ts'],
  //     extends: [
  //       'plugin:vue/recommended',
  //       'eslint:recommended',
  //       'plugin:@typescript-eslint/recommended',
  //       '@vue/prettier',
  //       '@vue/typescript',
  //     ],
  //     parser: 'vue-eslint-parser',
  //     rules: {
  //       // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
  //       '@typescript-eslint/explicit-module-boundary-types': 'off',
  //       '@typescript-eslint/no-explicit-any': 'off',
  //       '@typescript-eslint/no-non-null-assertion': 'off',
  //     },
  //   },
  //   {
  //     files: ['**/tests/**/*.{j,t}s?(x)'],
  //     env: {
  //       jest: true,
  //     },
  //   },
  // ],
}

.prettierrc.js

公式

プロジェクト直下に作成

module.exports = {
  printWidth: 120,
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'always',
}

.stylelintrc.js

公式

プロジェクト直下に作成

module.exports = {
  root: true,
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  plugins: ['stylelint-order'],
  rules: {
    'custom-property-empty-line-before': null,
    'order/properties-alphabetical-order': true,
  },
}

.editorconfig

公式

プロジェクト直下に作成

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

なかなかえぐい