ESlint：是用來統一JavaScript程式碼風格的工具，不包含css、html等。

方法和步驟：

通常情況下vue專案都會新增eslint元件，我們可以檢視webpack的配置檔案package.json檢視,也可以檢視工程下是否有.eslintrc.js和.eslintignore檢視到eslint是否開啟。

當我們編寫不符合eslint規範的程式碼時，啟動專案會報錯，比如

這個時候可以安裝vscode eslint外掛，就可以自動檢測不符合規範的程式碼。開啟vscode左側擴充套件面板，搜尋eslint，點選安裝，重啟後生效

安裝好之後，還需要在vscode檔案中進行設定：

通過 file->preferences->Settings 出現如下介面：

點選紅框，則會出現配置檔案

把以下程式碼複製到這個檔案中：

{
 // vscode預設啟用了根據檔案型別自動設定tabsize的選項
 "editor.detectIndentation": false,// 重新設定tabsize
 "editor.tabSize": 2,// #每次儲存的時候自動格式化
 "editor.formatOnSave": true,// #每次儲存的時候將程式碼按eslint格式進行修復
 "eslint.autoFixOnSave": true,// 新增 vue 支援
 "eslint.validate": [
 "javascript","javascriptreact",{
  "language": "vue","autoFix": true
 }
 ],// #讓prettier使用eslint的程式碼格式進行校驗
 "prettier.eslintIntegration": true,// #去掉程式碼結尾的分號
 "prettier.semi": false,// #使用帶引號替代雙引號
 "prettier.singleQuote": true,// #讓函式(名)和後面的括號之間加個空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #讓vue中的js按編輯器自帶的ts格式進行格式化
 "vetur.format.defaultFormatter.js": "vscode-typescript","vetur.format.defaultFormatterOptions": {
 "js-beautify-html": {
  "wrap_attributes": "force-aligned"
  // #vue元件中html程式碼格式化樣式
 }
 },"window.zoomLevel": 0,"explorer.confirmDelete": false,"explorer.confirmDragAndDrop": false,"editor.renderControlCharacters": true,"editor.renderWhitespace": "all"
}

然後在專案的.eslintrc.js中新增如下程式碼：

// https://eslint.org/docs/user-guide/configuring

module.exports = {
 root: true,parserOptions: {
 parser: 'babel-eslint'
 },env: {
 browser: true
 },extends: [
 // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
 // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
 'plugin:vue/essential',// https://github.com/standard/standard/blob/master/docs/RULES-en.md
 'standard'
 ],// required to lint *.vue files
 plugins: ['vue'],// add your custom rules here
 rules: {
 // allow async-await
 'no-console': 'off',indent: ['error',2,{ SwitchCase: 1 }],semi: ['error','always'],'space-before-function-paren': [
  'error',{ anonymous: 'always',named: 'never' }
 ],'generator-star-spacing': 'off',// allow debugger during development
 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
 }
}

ctrl + s儲存程式碼後，便會自動修復格式不正確的程式碼

總結

到此這篇關於Vue專案vscode 安裝eslint外掛的方法(程式碼自動修復)的文章就介紹到這了,更多相關vscode 安裝eslint外掛內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！