# Vue3のベースプロジェクトのコードを統一する
2 min read
Table of Contents
ESLintを導入する
npm i -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugintouch .eslintrc.ymlで設定ファイルを作成する。
作成した設定ファイルに、
env:browser: truees2021: trueextends:- 'plugin:vue/vue3-recommended'- 'eslint:recommended'- '@vue/typescript/recommended'parserOptions:ecmaVersion: 12plugins:- vue- '@typescript-eslint'rules: {}を記入する。
package.jsonに
"scripts": {..."lint": "eslint --fix src/*.{ts,vue} && eslint --fix src/**/*.{ts,vue}",},上記Scriptを追加する。
npm run lint上記コマンドで無事にScriptが実行されるかを確認する。
環境構築時に作成されるvite-env.d.tsがESLintで引っかかるので、
touch .eslintignoreでESLlint除外設定ファイルを作成し、
vite-env.d.tsと記入する。
Prettierを導入
npm i -D prettier @vue/eslint-config-prettierで必要パッケージのインストールをする。
touch .prettierrc.ymlで、設定ファイルを作成し、設定を記入する。
設定の意味はこちらを参考に。
今回は下記を採用した。
printWidth: 80tabWidth: 2singleQuote: truesemi: false最後にScriptを追加する。
"scripts": {..."format": "prettier -w src/*.{ts,vue} && prettier -w src/**/*.{ts,vue}",}Scriptを実行し動けば問題ない。
同時に実行する
ふたつそれぞれ実行するのは面倒なので、
"scripts": {..."fix": "npm run format && npm run lint"}上記を追記し、一気にふたつ動かすことができる。
無事に動いていれば成功。
