問題描述

當使用ESLint插件時，報一堆ESLint語法/格式問題，手動按提示修復一保存又自動恢復ESLint報錯的樣子，此時想到的是還不如不自動修復，因此需要手動關閉ESLint自動修復功能。

  216 |                 :value="item.value" />217 |             </el-select>218 |           </el-form-item>error: Binding "key" should be on a new line (vue/max-attributes-per-line) at src\views\setting\clientmanage\index.vue:215:71:213 |             <el-select v-model="role2.machine_position" placeholder="請選擇或輸入" filterable style="width: 60%"214 |               @change.native="selectBlur">
> 215 |               <el-option v-for="item in elSelectModelMachinePosition" :key="item.value" :label="item.value"|                                                                       ^216 |                 :value="item.value" />217 |             </el-select>218 |           </el-form-item>error: Binding "label" should be on a new line (vue/max-attributes-per-line) at src\views\setting\clientmanage\index.vue:215:89:213 |             <el-select v-model="role2.machine_position" placeholder="請選擇或輸入" filterable style="width: 60%"214 |               @change.native="selectBlur">
> 215 |               <el-option v-for="item in elSelectModelMachinePosition" :key="item.value" :label="item.value"|                                                                                         ^216 |                 :value="item.value" />217 |             </el-select>218 |           </el-form-item>warning: Expected indentation of 25 spaces but found 16 spaces (vue/html-indent) at src\views\setting\clientmanage\index.vue:216:1:214 |               @change.native="selectBlur">215 |               <el-option v-for="item in elSelectModelMachinePosition" :key="item.value" :label="item.value"
> 216 |                 :value="item.value" />| ^217 |             </el-select>218 |           </el-form-item>219 |           <el-form-item label="服 務 器" prop="server_id">warning: Expected 1 line break before closing bracket, but no line breaks found (vue/html-closing-bracket-newline) at src\views\setting\clientmanage\index.vue:216:36:214 |               @change.native="selectBlur">215 |               <el-option v-for="item in elSelectModelMachinePosition" :key="item.value" :label="item.value"
> 216 |                 :value="item.value" />|                                    ^217 |             </el-select>218 |           </el-form-item>219 |           <el-form-item label="服 務 器" prop="server_id">error: Directive "model" should be on a new line (vue/max-attributes-per-line) at src\views\setting\clientmanage\index.vue:225:24:223 |           </el-form-item>224 |           <el-form-item label="維護人員" prop="machine_charger_id">
> 225 |             <el-select v-model="role2.machine_charger_id" placeholder="請選擇" filterable style="width: 60%"|                        ^226 |               @blur="selectUser2">227 |               <el-option v-for="item in tbuserList" :key="item.key" :label="item.value" :value="item.key" />228 |             </el-select>error: Attribute "placeholder" should be on a new line (vue/max-attributes-per-line) at src\views\setting\clientmanage\index.vue:225:59:223 |           </el-form-item>224 |           <el-form-item label="維護人員" prop="machine_charger_id">
> 225 |             <el-select v-model="role2.machine_charger_id" placeholder="請選擇" filterable style="width: 60%"|                                                           ^226 |               @blur="selectUser2">227 |               <el-option v-for="item in tbuserList" :key="item.key" :label="item.value" :value="item.key" />228 |             </el-select>error: Attribute "filterable" should be on a new line (vue/max-attributes-per-line) at src\views\setting\clientmanage\index.vue:225:77:223 |           </el-form-item>224 |           <el-form-item label="維護人員" prop="machine_charger_id">
> 225 |             <el-select v-model="role2.machine_charger_id" placeholder="請選擇" filterable style="width: 60%"|                                                                             ^226 |               @blur="selectUser2">227 |               <el-option v-for="item in tbuserList" :key="item.key" :label="item.value" :value="item.key" />228 |             </el-select>error: Attribute "style" should be on a new line (vue/max-attributes-per-line) at src\views\setting\clientmanage\index.vue:225:88:223 |           </el-form-item>224 |           <el-form-item label="維護人員" prop="machine_charger_id">
> 225 |             <el-select v-model="role2.machine_charger_id" placeholder="請選擇" filterable style="width: 60%"|                                                                                        ^226 |               @blur="selectUser2">227 |               <el-option v-for="item in tbuserList" :key="item.key" :label="item.value" :value="item.key" />228 |             </el-select>warning: Expected indentation of 23 spaces but found 14 spaces (vue/html-indent) at src\views\setting\clientmanage\index.vue:226:1:224 |           <el-form-item label="維護人員" prop="machine_charger_id">225 |             <el-select v-model="role2.machine_charger_id" placeholder="請選擇" filterable style="width: 60%"
> 226 |               @blur="selectUser2">| ^227 |               <el-option v-for="item in tbuserList" :key="item.key" :label="item.value" :value="item.key" />228 |             </el-select>229 |           </el-form-item>warning: Expected 1 line break before closing bracket, but no line breaks found (vue/html-closing-bracket-newline) at src\views\setting\clientmanage\index.vue:226:34:224 |           <el-form-item label="維護人員" prop="machine_charger_id">225 |             <el-select v-model="role2.machine_charger_id" placeholder="請選擇" filterable style="width: 60%"
> 226 |               @blur="selectUser2">|                                  ^227 |               <el-option v-for="item in tbuserList" :key="item.key" :label="item.value" :value="item.key" />228 |             </el-select>229 |           </el-form-item>
44 errors and 27 warnings found.
26 errors and 27 warnings potentially fixable with the `--fix` option.You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

例如：

原書寫代碼

            <el-select v-model="role2.machine_charger_id" placeholder="請選擇" filterable style="width: 60%" @blur="selectUser2">

ESLint自動修復

            <el-select v-model="role2.machine_charger_id" placeholder="請選擇" filterable style="width: 60%"@blur="selectUser2">

報錯如下

warning: Expected 1 line break before closing bracket, but no line breaks found (vue/html-closing-bracket-newline) at src\views\setting\clientmanage\index.vue:226:34:224 |           <el-form-item label="維護人員" prop="machine_charger_id">225 |             <el-select v-model="role2.machine_charger_id" placeholder="請選擇" filterable style="width: 60%"
> 226 |               @blur="selectUser2">|                                  ^227 |               <el-option v-for="item in tbuserList" :key="item.key" :label="item.value" :value="item.key" />228 |             </el-select>229 |           </el-form-item>

方案一、在文件中添加屏蔽警告的代碼

html代碼中

<!-- eslint-disable -->:屏蔽此文件后續所有代碼ESLint警告
<!-- eslint-disable-next-line -->:屏蔽下一行的代碼ESLint警告

<template><!-- eslint-disable --><div class="app-container"></div>
</template>

JavaScript代碼中

/* eslint-disable */:屏蔽此文件后續所有代碼ESLint警告
// eslint-disable-next-line:屏蔽下一行的代碼ESLint警告

<script>
/* eslint-disable */
import PanelGroup from './PanelGroup'
</script>

方案二、關閉ESLint的自動修復功能

1、VSCode 擴展找到 ESLint 插件

打開ESLint擴展設置

2、在設置中找到在 settings,json 中編輯

3、將"autoFix": true改為"autoFix": false

{// vscode默認啟用了根據文件類型自動設置tabsize的選項"editor.detectIndentation": false,// 重新設定tabsize"editor.tabSize": 2,//Ctrl+滾輪實現代碼的縮放"editor.mouseWheelZoom": true,// #每次保存的時候自動格式化"editor.formatOnSave": true,// 添加 vue 支持"eslint.validate": ["javascript","javascriptreact",{"language": "vue","autoFix": false}],//  #讓prettier使用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","vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "auto",},"prettyhtml": {"printWidth": 100,"singleQuote": false,"wrapAttributes": false,"sortAttributes": false}},"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"[html]": {"editor.defaultFormatter": "mohd-akram.vscode-html-format"},"editor.fontFamily": "Consolas, 'Courier New', monospace,iconfont","[python]": {"editor.formatOnType": true},"security.workspace.trust.untrustedFiles": "open","workbench.iconTheme": "vscode-icons","tabnine.experimentalAutoImports": true,"markdown-preview-enhanced.automaticallyShowPreviewOfMarkdownBeingEdited": true,"[scss]": {"editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter"},"vetur.validation.template": false,"git.enableSmartCommit": true,"git.autofetch": true,"editor.unicodeHighlight.nonBasicASCII": false,"eslint.options": {},"eslint.timeBudget.onFixes": {"warn": 3000,"error": 6000},"eslint.execArgv": null// 格式化stylus, 需安裝Manta's Stylus Supremacy插件//  "stylusSupremacy.insertColons": false, // 是否插入冒號//  "stylusSupremacy.insertSemicolons": false, // 是否插入分好//  "stylusSupremacy.insertBraces": false, // 是否插入大括號//  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行//  "stylusSupremacy.insertNewLineAroundBlocks": false // 兩個選擇器中是否換行
}

4、重啟VSCode