自動フォーマット機能を保存するために独自のvscodeサポートを素早く構成したい場合
1.次のvscode拡張機能をインストールします。
ESLint
Prettier-コードフォーマッター
冬
示されているように:
次に、設定ファイルを開きます
開封方法:
まず、手順に従って設定インターフェースを開きます。
コード->設定->設定(ショートカットキーコマンド+、(mac)を直接開くこともできます)
これで、インターフェース構成モードが表示され、右上隅にある3つのドット(下図を参照)をクリックして、settings.jsonファイルを開くことを選択します。
3番目に、setting.jsonファイルに次の構成を追加
注:この構成は、CSS、HTML、JS、Vueなどのファイルのフォーマットをサポートしています。参照して、必要に応じて構成できます。
特段のご要望がない場合はそのままご利用いただけます。
{
// tab 大小为2个空格
"editor.tabSize": 2,
// 100 列后换行
"editor.wordWrapColumn": 100,
// 保存时格式化
"editor.formatOnSave": true,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",
// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,
// 设置 eslint 保存时自动修复
"eslint.autoFixOnSave": true,
// eslint 检测文件类型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue"
"autoFix": true
}
],
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
}
}
構成を保存し、フォーマットコードを保存する