[JS]ESLint&Prettier

4290 ワード
JavaScript テキストリンク

1.ESList

  • Javascriptのスタイルガイドに従わないか、問題のある場所を検索し、一貫したコード
    • を作成するのに役立ちます.
  • node.js環境に適した

    • ［ESListのインストール］

  • npmまたは糸取り付け(npm install eslint --save-dev) or (yarn add eslint --dev)
  • プロファイル設定npx eslint --initeslint初期化の実行時にオプション
    • を設定できます.
    ? How would you like to use ESLint? · problems
? Which framework does your project use? · react
? Does your project use TypeScript? · No / Yes
? Where does your code run? · browser, node
? What format do you want your config file to be in? · JavaScript
? Would you like to install them now with npm? · No / Yes
    =>設定が完了したら.eslintrc.jsファイルを作成
    状況に応じてオプションを追加できる[24579152]

    [Vscodeとの併用]


    拡張プラグインESLintをインストールしてご利用いただけます

    =>設定に従って自動的に変更するには、Vscodeにオプションを追加する必要があります.
    // settings.json
  "editor.codeActionsOnSave": { // 저장 버튼 누르면 자동으로 eslint의 규칙되로 변경
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "html"],
  "eslint.alwaysShowStatus": true

    2. Prettier


    -オプションに応じてコードスタイルを調整します.

    [Prettierのインストール]


    1)Vscode拡張プログラムを使用して2)npm(npm install --save-dev --save-exact prettier)をインストールする
    -.prettierrcファイルの作成=>基本オプションを含める
    {    
    "singleQuote": "true",

    "semi": "true",

    "useTabs": "false",

    "tabWidth": 2,

    "trailingComma": 'all',

    "printWidth": 80,

    "arrowParens": 'avoid',

    "endOfLine": "auto",
}
  • Vscodeグローバルで使用するには、Setting.jsonに次の項目を追加する必要があります:
    •  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
    勉強して書いているブログ.
    間違った内容があるかもしれませんが、もしあれば、メッセージを残してください.ありがとうございます.
    😊
    06_HttpEntityの使用
    [Javaの定式]Chapter 1Javaを開始する前に(10～12)