vsCode JS コード整形プラグイン ESlint

vsCode JS コード整形プラグイン ESlint

検証は有効で、Ctrl+S 保存コードは完全にフォーマットされています。これを書いているのは主に個人的なメモであり、複製ではありません。

ソース: https://blog.csdn.net/qq_34803821/article/details/84972781

1.プラグインをインストールする

VSCode でアプリ ストアを開き、ESlint、vetur、Prettier - コード フォーマッターの 3 つのプラグインを検索してインストールします。明確

 2. VSCode の Settings.json ファイルを構成する

2.1. 設定画面を開く

パスを開きます: ファイル (ファイル) -> 設定 (設定) -> 設定 (設定)。

開くためのショートカットキー: Ctrl+,

2.2. Settings.json ファイルを開く

開く方法 1:

 開く方法 2:

 2.3、構成コード、// コードのフォーマット

{ 
// コード ファイル ヘッダー コメント
  "fileheader.customMade": { 
    "Descripttion": "js", 
    "Version": "1.0", 
    "Author": "name", 
    "Date": "Do not edit", 
    " LastEditors ": "name", 
    "LastEditTime": "編集しないでください" 
  }, 
  "fileheader.cursorMode": { 
    "name": "", 
    "test": "test font", 
    "msg": "", 
    "param " : "", 
    "return": "" 
  }, 
  
// コードのフォーマット
  // vscode は、デフォルトでファイルの種類に応じてタブサイズを自動的に設定するオプションを有効にします
  "editor.detectIndentation": false, 
  // タブサイズをリセット
  "editor.tabSize": 2, 
  // #保存するたびに自動的にフォーマット
  "editor.formatOnSave": true, 
  // #フォーマットを保存するたびにコードを押して eslint を修正する
  "eslint.autoFixOnSave": true, 
  // vue サポートを追加
  "eslint.validate": [ 
    "javascript", 
    "javascriptreact", 
    { 
      "language": "vue", 
      "autoFix": true 
    } 
  ], 
  // #letter検証には eslint のコード形式を使用
  "prettier.eslintIntegration": true, 
  // #コード末尾のセミコロンを削除
  "prettier.semi": false, 
  // #二重引用符の代わりに引用符を使用
  "prettier.singleQuote" : true, 
  // #関数 (名前) とそれに続く括弧の間にスペースを追加します
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, 
  // #これはユーザー自身の習慣に従って選択されます
  "vetur.format.defaultFormatter.html" : "js-beautify-html", 
  // # vue の js をエディターに付属の ts フォーマットに従ってフォーマットします
  "vetur.format.defaultFormatter.js": "vscode-typescript",defaultFormatter.js": "vscode-typescript", 
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": { 
      "wrap_attributes": "force-aligned" 
      // #vue コンポーネントの html コード フォーマット スタイル
    } 
  }, // スタイラスをフォーマットするには、Manta の Stylus Supremacy プラグイン
  "stylusSupremacy.insertColons"
  をインストールする必要があります。 false, // コロンを挿入するかどうか
  "stylusSupremacy.insertSemicolons": false, // サブを挿入するかどうか
  "stylusSupremacy.insertBraces": false, // 中かっこを挿入するかどうか
  "stylusSupremacy.insertNewLineAroundImports": false, // するかどうかwrap after import 
  " stylusSupremacy.insertNewLineAroundBlocks": false, // 2 つのセレクターで行を折り返すかどうか
  "vetur.validation.template": false, 
  "editor.codeActionsOnSave": null // vetur ラベル クロージャ チェックを閉じます (解決に使用) iview ラベルのエラー報告) 
}