Vue3のベースプロジェクトのコードを統一する
投稿日：2022年10月26日
過去に作ったVue３のベースプロジェクトにコード整形のプラグインを入れ、設定していく。
目次
ESLintを導入する
npm i -D eslint eslint-plugin-vue @vue/eslint-config-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugintouch .eslintrc.ymlで設定ファイルを作成する。
作成した設定ファイルに、
env:
browser: true
es2021: true
extends:
- 'plugin:vue/vue3-recommended'
- 'eslint:recommended'
- '@vue/typescript/recommended'
parserOptions:
ecmaVersion: 12
plugins:
- 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: 80
tabWidth: 2
singleQuote: true
semi: false最後にScriptを追加する。
"scripts": {
...
"format": "prettier -w src/*.{ts,vue} && prettier -w src/**/*.{ts,vue}",
}Scriptを実行し動けば問題ない。
同時に実行する
ふたつそれぞれ実行するのは面倒なので、
"scripts": {
...
"fix": "npm run format && npm run lint"
}上記を追記し、一気にふたつ動かすことができる。
無事に動いていれば成功。
- # JavaScript
- # Vue
- # プログラミング
次に読むおすすめ記事
JavaScriptで2つの配列を比較し、一致したものを取り出す方法コード
Angular Material UI でカスタムカラーを設定する。
この記事に対するコメント