超实用 vue2 项目代码风格统一 搭配eslint pretter配置

安装vscode插件

• Vetur
• ESlint
• EditorConfig for VS Code

安装node插件

cnpm i -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue

项目配置文件

• EditorConfig for VS Code

# .editorconfig
# http://editorconfig.org
root = true

[*]
#缩进风格：tab
indent_style = tab
#缩进大小4
indent_size = 4
#换行符lf
end_of_line =crlf
#字符集utf-8
charset = utf-8
#是否删除行尾的空格
trim_trailing_whitespace = true
#是否在文件的最后插入一个空行
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

• Vetur

.prettierrc.js

module.exports = {
	// tabWidth: 2,
	// useTabs: true,
	semi: false,
}

• eslint

.eslintrc.js

module.exports = {
	root: true,
	extends: [
		'eslint:recommended',
		'plugin:vue/recommended',
		'plugin:prettier/recommended'
	],
	// required to lint *.vue files
	plugins: [
		'vue'
	],
	// add your custom rules here
	rules: {
		"prettier/prettier": "error",
		// allow async-await
		'generator-star-spacing': 'off',
		// allow debugger during development
		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		// https://eslint.vuejs.org/rules/html-indent.html
		'vue/html-indent': 0,
		// https://eslint.vuejs.org/rules/max-attributes-per-line.html
		'vue/max-attributes-per-line': 0,
		// https://eslint.vuejs.org/rules/html-self-closing.html
		'vue/html-self-closing': 0,
		// https://eslint.vuejs.org/rules/script-indent.html#options
		// "vue/script-indent": ["error", 'tab'],
		// https://eslint.vuejs.org/rules/html-closing-bracket-newline.html
		'vue/html-closing-bracket-newline': 0,
		// https://eslint.vuejs.org/rules/component-tags-order.html
		'vue/component-tags-order': 0,
	}
}

• VsCode

{
  "scm.alwaysShowProviders": true,
  "scm.alwaysShowActions": true,
  "terminal.integrated.allowMnemonics": true,
  "terminal.integrated.shell.windows": "C:\\Program Files (x86)\\Git\\bin\\bash.exe",
  "git.alwaysShowStagedChangesResourceGroup": true,
  "workbench.panel.defaultLocation": "right",
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.options.useTabs": true,
  "files.autoSave": "afterDelay",
  "vetur.format.defaultFormatter.js": "prettier-eslint",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "vetur.validation.template": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
}

• 执行修复

    ctrl + s / commond + s

参考文档

• Vetur插件
• Prettier插件
• 集成Eslint
• eslint-plugin-vue