vscode+vueに設定を追加する方法

#vscode vue に設定を追加するにはどうすればよいですか?

vscode vue は追加する必要のあるプラグインと構成を使用する必要があります

最初に文句を言わせてください。vscode を使用するのは初めてです。本当に悲しいです。は必要なものではなく、コードには基本的なエラー検出がありません。忘れてください、HTML タグの自動補完機能はありません (もちろん、実際には存在しますが、ユーザーが設定する必要があります)。インストールまたは初期化中に一緒にインストールされましたか? Baidu に 1 つずつアクセスしてプラグインを見つけなければなりません。悲しいです。 。 。

推奨関連チュートリアル:

vscode チュートリアル

苦情は苦情です。Google と Baidu を使用できれば、あなたは上司です。

ファイルの自動保存設定

vscode の強力な機能の 1 つは自動コンパイルです。ページを更新する必要はありませんが、ドキュメントの保存後に自動コンパイルを実行する必要があります。編集完了後に押すのが面倒なので、「Ctrl S」を押すと文書が自動保存されるように設定できます。

ファイル->自動保存

上記は簡単な設定の場所です、より詳細な設定は vscode の設定にありますパスは次のとおりです:

[ファイル]->[設定]->[設定]の場合、右上隅にある「{}」アイコンをクリックして JSON 編集ウィンドウを開くこともできます。ここで自動保存の時間を設定することもできます。

HTML タグの自動補完

他のエディタ (HBuilder、WS、VS など) を使用して HTML コードを記述する前に、HTML タグの前半を入力してください。 htmlタグ 後半は自動で完了してくれるのですが、vscodeになると動かず非常に不快です。

vscode によってインストールされる拡張機能のうち、Emmet の主な機能の 1 つは、手動で設定する必要があるコードを完成させることです。

設定 (両方の設定スペースを構成する必要があります) で、次の構成コードを追加するだけです:

{
"emmet.triggerExpansionOnTab": true,
"files.associations": {
"*.js": "html",
"*.vue": "html"
}
}

強調表示、構文プラグイン

コードを書いているとよくエラーに遭遇するのですが、どこが間違っているのか、なぜ間違っているのか、どのように修正すればよいのかなど、次の図のようにわかりません。

## このようなエラーが発生した場合、コーディングを支援するプラグイン、Vetur、ESLint、Prettier プラグインを使用できます。これら 3 つのプラグインをインストールした後、次のように設定します。

"editor.lineNumbers": "on", //打开行号
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, //制表符符号eslint
  "editor.formatOnSave": true, //保存时自动格式化
  "eslint.autoFixOnSave": true, //保存时自动将代码按ESLint格式进行修复
  "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
  "eslint.validate": [
    //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]

このようにして、vue を vscode で書くのが少し簡単になります。

完全な構成は以下に掲載されています:

{
  "files.autoGuessEncoding": true,
  "files.autoSave": "afterDelay", //自动保存
  "editor.lineNumbers": "on", //打开行号
  "editor.quickSuggestions": {
    //开启自动显示建议
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.tabSize": 2, //制表符符号eslint
  "editor.formatOnSave": true, //保存时自动格式化
  "eslint.autoFixOnSave": true, //保存时自动将代码按ESLint格式进行修复
  "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
  "prettier.semi": false, //去掉代码结尾的分号
  "prettier.singleQuote": true, //使用带引号替代双引号
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
  "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
  "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned" //属性强制折行对齐
    }
  },
  "eslint.validate": [
    //开启对.vue文件中错误的检查
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "emmet.triggerExpansionOnTab": true,
  "files.associations": { //要进行html补全的文件
    "*.js": "html",
    "*.vue": "html"
  }
}

以上がvscode+vueに設定を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。