環境
- intel Mac
- VSCode
自分の設定
.prettier
{
"printWidth": 120,
"singleQuote": true,
"semi": false,
"vueIndentScriptAndStyle": true,
"trailingComma": "es5"
}
- eslintの方になります。
- rulesとglobals以外の部分は正直他の記事とそこまで変わらないと思われます。
.eslintrc
{
"root": true,
"env": {
"browser": true,
"es2022": true,
"node": true
},
"extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/typescript/recommended", "@vue/prettier"],
"parserOptions": {
"ecmaVersion": 13
},
"plugins": [],
"rules": {
"vue/multi-word-component-names": "off",
"prettier/prettier": ["error", { "printWidth": 120 }]
},
"globals": {
"NodeJS": true
}
}
rulesとglobalsの部分
"vue/multi-word-component-names": "off"
- これを設定しないと、linterを実行したタイミングで、
「Component name "" should always be multi-word」というエラーが発生する - 以下の記事を参考にして設定するとエラーが出なくなった
"prettier/prettier": ["error", { "printWidth": 120 }]の部分
- これを設定しておかないと以下のようなwarningが出る
- 自分は
"printWidth": 120のみで良かったが他の原因の場合はそのprettierの設定を記述すると良いのではないかと思われる
「Replace `△△` with `⏎··········〇〇⏎········`eslintprettier/prettier」
'NodeJS' is not defined no-undefというエラー
- 今回のプロジェクトでsetIntervalを使用しているのですが、typescriptによる型定義をしたタイミングで
'NodeJS' is not defined no-undefというエラーが発生してしまう。 - ちなみに、setIntervalの引数と返り値の型は以下のようになっている
function setInterval<[]>(callback: () => void, ms?: number): NodeJS.Timer (+2 overloads)
namespace setInterval
- 以下の記事を参考にするとエラーが消えた
vscodeの設定
- .vscode/settings.json
- プロジェクト直下に上記のファイルを作成
- 以下を設定するすることで、プロジェクトの他のメンバーと設定を合わせることができる
settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"eslint.format.enable": false,
// cmd+sを押すと同時にformatterを適用
"editor.formatOnSave": true,
// prettierをデフォルトのformatterとして使用
"editor.defaultFormatter": "esbenp.prettier-vscode",
"eslint.packageManager": "npm",
// デフォルトのインデント幅がスペース2個分になる
"editor.tabSize": 2,
// phpではintelephenseをformatterとして使用
"[php]": {
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
}
}
tabSizeが違うと出る赤いインデント幅
- vscodeのデフォルトのtabSizeは4だが、prettierのデフォルトのtabWidthが2になっているから以下の写真のようになる
- こういう感じでformatterを指定したときにインデントの箇所が赤くなってしまう
- prettierとvscodeのtabSizeを合わせてやると良いかも
- 本来はprettierに設定していればvscodeは変える必要がない気もするが、自分はvscodeの方にも設定する必要があった
- 個人的にはvscodeの方を2にするのが好きではある
