先安裝插件 Vetur + Prettier + ESlint

Vetur

Prettier

ESlint

1、ESlint設(shè)置

項(xiàng)目根目錄下創(chuàng)建文件.eslintrc.js

// .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //強(qiáng)制使用單引號(hào)
    quotes: ['error', 'single'],
    //強(qiáng)制不使用分號(hào)結(jié)尾
    semi: ['error', 'never']
  }
}

2、Prettier設(shè)置

項(xiàng)目根目錄下創(chuàng)建文件 prettier.config.js 或者 .prettierrc.js

// prettier.config.js

module.exports = {
    // tab縮進(jìn)大小,默認(rèn)為2
    tabWidth: 2,
    useTabs: false,
    // 使用分號(hào), 默認(rèn)true
    semi: false,
    // 使用單引號(hào), 
    singleQuote: true,
    // 行尾逗號(hào),
    TrailingCooma: 'none',
    // 空格
    bracketSpacing: true,
    // 箭頭函數(shù)參數(shù)括號(hào) 默認(rèn)avoid 可選 avoid| always
    // avoid 能省略括號(hào)的時(shí)候就省略 例如x => x
    // always 總是有括號(hào)
    arrowParens: 'always',
}

3、Vetur設(shè)置

項(xiàng)目根目錄下創(chuàng)建 .vscode文件夾，在文件夾中創(chuàng)建文件settings.json，該配置文件僅針對(duì)此項(xiàng)目生效，可以用來(lái)團(tuán)隊(duì)協(xié)作，統(tǒng)一代碼規(guī)范

// .vscode/settings.json

{
  //.vue文件template格式化支持，并使用js-beautify-html插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  //js-beautify-html格式化配置，屬性換行不強(qiáng)制、每行120字符
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_line_length": 120,
      "wrap_attributes": "auto",
      "end_with_newline": false
    }
  },
  "vetur.format.defaultFormatter.js": "prettier",
  //根據(jù)文件后綴名定義vue文件類型
  "files.associations": {
    "*.vue": "vue"
  },
  //配置 ESLint 檢查的文件類型
  "eslint.validate": ["javascript", "javascriptreact"],
  //保存自動(dòng)格式化
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    //保存時(shí)eslint自動(dòng)修復(fù)錯(cuò)誤
    "source.fixAll.eslint": true
  }
}

以上為我推薦使用的方式，如果想快速達(dá)到使用效果，復(fù)制我的配置即可，以上配置的生效范圍針對(duì)項(xiàng)目，優(yōu)先級(jí)最高，你也可以在文件--首選項(xiàng)-設(shè)置 打開(kāi)配置項(xiàng)，選擇生效范圍用戶或工作區(qū)手動(dòng)去配置選項(xiàng)。

image.png

一位大佬更詳細(xì)的保姆級(jí)配置教程，受益匪淺：
Vue學(xué)習(xí)筆記7 - 在Vscode中配置Vetur，ESlint，Prettier
https://blog.csdn.net/justflow/article/details/109897364