效果点击保存自动格式化代码 

需要安装Eslint 和 petter

 

涉及的文件有： 

.eslintignore

public/*

  .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/essential', 'plugin:prettier/recommended'],

  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

.prettierignore

static/**/*/.js
node_modules/

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

setting.json 配置

{
	"editor.tabSize": 2,
	"editor.codeActionsOnSave": {
			"source.fixAll.eslint": true
	},
	"eslint.codeAction.disableRuleComment": {
			"enable": true,
			"location": "separateLine"
	},
	"eslint.format.enable": true,
	"eslint.lintTask.enable": true,
	"eslint.alwaysShowStatus": true,
	"explorer.confirmDragAndDrop": false,
	"git.autofetch": true,
	"editor.renderWhitespace": "none",
	"workbench.iconTheme": "vscode-icons",
	"git.confirmSync": false,

	// 解决vscode cpu占用率过高
	"search.followSymlinks": false,
	"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
	"workbench.editor.enablePreview": true,
	"workbench.editor.enablePreviewFromQuickOpen": false,
	"workbench.editor.closeEmptyGroups": false,
	"workbench.editor.centeredLayoutAutoResize": false,
	"workbench.editor.focusRecentEditorAfterClose": false,
	"prettier.useTabs": true,
	"editor.renderIndentGuides": false,
	"editor.highlightActiveIndentGuide": false,
	"window.clickThroughInactive": false,
	"launch": {
	
			"configurations": [],
			"compounds": []
	},
	"files.associations": {
			"*.vue": "vue"
	},
	"vsicons.dontShowNewVersionMessage": true,
	"diffEditor.ignoreTrimWhitespace": false,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"[javascript]": {
			"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescript]": {
			"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[jsonc]": {
			"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[html]": {
			"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[vue]": {
			"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[json]": {
			"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescriptreact]": {
			"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascriptreact]": {
			"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"javascript.updateImportsOnFileMove.enabled": "always",
	"editor.rulers": [],
	"security.workspace.trust.untrustedFiles": "open",
	"explorer.confirmDelete": false,
	"editor.minimap.enabled": false,
	"editor.renderControlCharacters": true
}