漂亮运行的设定和代码检查工具的设置
环境
-
- intel Mac
- VSCode
我自己的设定
{
"printWidth": 120,
"singleQuote": true,
"semi": false,
"vueIndentScriptAndStyle": true,
"trailingComma": "es5"
}
-
- eslintの方になります。
rulesとglobals以外の部分は正直他の記事とそこまで変わらないと思われます。
{
"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”: “关闭”
-
- これを設定しないと、linterを実行したタイミングで、「Component name “” should always be multi-word」というエラーが発生する
-
- 以下の記事を参考にして設定するとエラーが出なくなった
Nuxt 3 触ってみる
コンポーネント名がESLintで引っかかります
“更漂亮/更漂亮”: [“错误”, { “打印宽度”: 120 }]的部分
-
- これを設定しておかないと以下のようなwarningが出る
- 自分は”printWidth”: 120のみで良かったが他の原因の場合はそのprettierの設定を記述すると良いのではないかと思われる
「Replace `△△` with `⏎··········〇〇⏎········`eslintprettier/prettier」
-
- 以下の記事にて解決した
https://github.com/prettier/eslint-plugin-prettier/issues/102#issuecomment-826315412
‘NodeJS’未定义 no-undef错误
-
- 今回のプロジェクトでsetIntervalを使用しているのですが、typescriptによる型定義をしたタイミングで’NodeJS’ is not defined no-undefというエラーが発生してしまう。
- ちなみに、setIntervalの引数と返り値の型は以下のようになっている
function setInterval<[]>(callback: () => void, ms?: number): NodeJS.Timer (+2 overloads)
namespace setInterval
-
- 以下の記事を参考にするとエラーが消えた
eslint error ‘NodeJS’ is not defined no-undef
VS Code的设置
-
- .vscode/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にするのが好きではある
请看这篇文章
-
- ViteでVue3のTypescript環境を構築する
-
- Visual Studio Codeで既定のインデント幅を変更する
-
- 【VSCode】Prettierの使い方＆おすすめ設定を紹介
- Next.jsにPrettierを導入して設定する
