vueプロジェクトでeslint+prettierフォーマットコードを使用する方法の詳細

フロントエンドのコードスタイルという問題はずっと衰えていないので、誰もが自分のコードスタイルを持っていて、他の人のコードがめちゃくちゃになっているのを見るたびに私たちはツッコミを入れます.今日はeslint+prettierを使用してコードスタイルを統一する方法を紹介します.
eslintについては、コード仕様を検証するために使用されていることをよく知っているはずです.コードスタイルを統一し、コードをフォーマットするためのprettierを紹介します.js、ts、css、less、scss、json、jsxをサポートします.vscode、vim、webstorm、sublime textプラグインが統合されています.
プロジェクトでellintデフォルトルールを採用し、他のルールを追加していない場合、standardまたはairbnbスタイルを使用していない場合は、エディタプラグインをダウンロードしてコードを直接保存するときに自動的にフォーマットできます.
vscodeの例:プラグインEslint、vuter、prettier-codeのインストールを検索し、エディタのプリファレンス構成で構成を変更します.

//  prettier     vue  template     js-beautify-html   
"vetur.format.defaultFormatter.html": "js-beautify-html", 
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_attributes": "force-aligned" //        
  }
},
"eslint.autoFixOnSave": true, //          
"eslint.validate": [  //      
  "javascript",
  "javascriptreact",
  "vue",
  "html",
  "jsx",
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "vue",
    "autoFix": true
  }
],
"prettier.singleQuote": true, //           
"prettier.jsxBracketSameLine": true, // >  JSX           ，          
"editor.formatOnSave": true, //        

その後eslintプロファイルで.Eslintrc extends追加eslint:recommended

extends: [
    'plugin:vue/essential',
    'eslint:recommended'
  ],

pageでjsonファイルscriptsにlintを追加--fix npm run lintを実行するとeslintが自動的に修復できるルールを修復します

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --fix --ext .js,.vue src",
    "build": "node build/build.js"
  },

コード保存を書き終わるとprettierがコードをフォーマットしてくれ、npm run lintを実行するとeslintは修復可能なルールを修復し、残りのルールは手動で修復する必要があります.
プロジェクトでstandardまたはairbndのコード仕様を使用している場合、またはプロジェクトにeslintスタイルルールを追加している場合は、プロジェクトでコードのフォーマットを支援する依存性をインストールする必要があります.

npm i --save-dev prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

インストールeslint-plugin-prettierはeslintと協力してprettierを使用し、インストールeslint-config-prettierはいくつかのeslintとprettierの衝突の規則を無効にし、prettier-eslint-cliをインストールしてコマンドフォーマットコードを叩くことができます
はい.eslintrc.js pluginとextendsにprettierを追加rulesにルールを追加することをサポート

extends: [
   'plugin:vue/essential',
   'eslint:recommended',
   'plugin:prettier/recommended'
 ],
 // required to lint *.vue files
 plugins: ['vue','prettier'],
 // add your custom rules here
 rules: {
   'prettier/prettier':'error',
   // allow debugger during development
   'no-debugger': process.env.NODE_ENV ==='production'?'error':'off'

pageでjson scriptに構成を追加してnpm run formatを実行すればコードをフォーマットできます

"scripts": {
    "dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start":"npm run dev",
    "lint":"eslint --fix --ext .js,.vue src",
    "build":"node build/build.js",
    "format":"prettier-eslint --write \"src/**/*.js\" \"src/**/*.vue\""
  },

npm run formatを実行すると、error:Deleteこれはprettier構成とエディタprettier構成の競合によるrulesでの構成で上書きすればよいためです

"rules": {
 "no-console": 0,
 "prettier/prettier": [
  "error",
  {
   "singleQuote":true,
   "trailingComma":"none",
   "bracketSpacing":true,
   "jsxBracketSameLine":true
  }
 ]
}

今は楽しくコードできます
本リンクhttp://www.ngui.cc/vuejs/show-5771.html
追加で発生した問題npm auditを使用すると、開発者が複雑なコードを分析し、特定の脆弱性と欠陥を特定できます.(https://blog.csdn.net/weixin_40817115/article/details/81007774)npm i警告(https://blog.csdn.net/qq_27295403/article/details/83028369)