vs code配置vue自動格式化

 vs code配置vue自動格式化

我他媽的要被這個vs code的格式化逼瘋了。我在網上看了不少的文章，不是太老就是很差使，遇到太多坑了。
在這貼出本身的配置，雖然有多餘的代碼，雖然可能在將來的更新中用不了，雖然功能不是十分徹底，可是但願能幫助到被逼瘋的你。
但願大神能給我挑挑毛病，下面開始。

控制變量
目的：在你按了ctrl+s以後，根據規則自動格式化vue和js（ts）代碼
vs code版本：最新版
npm版本：最新版
插件：
·ESLint
·Prettier
·vuter（這個東西我不確認在自動保存上的有沒有做用，但願大神指點）
vue：2x
項目構建方法：腳手架，實測在複製過來的老webpack項目裏也能夠
package.json關連依賴確認（是否是都起到做用就不知道了，望大神指點）：

.eslintrc.js(配置了n遍以後的，估計裏面有多餘的代碼)

module.exports = {
  root: true,

  env: {
    node: true,
    es6: true,
  },

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

  plugins: ['prettier'],

  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
    ecmaVersion: 6,//js的版本
 },

 rules: { quotes: [1, 'single'],//這個地方很迷，要爲eslint配置相似於prettierrc的格式化代碼，纔會在vue的template中起做用 'prettier/prettier': 'error', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', }, }

.prettierrc.js(配置了n遍以後的，估計裏面有多餘的代碼)

module.exports = {
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  endOfLine: 'auto',
  trailingComma: 'all',
  vueIndentScriptAndStyle: true,
}

setting.json

"editor.formatOnSave": true,
"files.autoSave": "off",
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
},

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
 "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

"eslint.format.enable": true,
"eslint.options": {
    "extensions": [".js", ".vue"]
},
"eslint.validate": [
    "javascriptreact",
    "javascript",
    "html",
    "vue"
],

 

配置完以後就是做用於js和vue，點擊保存自動整形，有不符合規則的的寫法會報錯，徹底錯誤的報紅色，不規範報黃色。
我知道還有不少不足，但願懂的大佬能給我一些指點。