vue项目通过eslint格式校验，通过prettier格式化，eslint+prettier前端项目统一格式规范_vue prettier

Eslint和Prettier的区别：

     Eslint：

                        1. Eslint可以对js语法检测、限制和修复

                        2. Eslint可以对代码风格进行格式化，但是不能对css、less等格式化

     Prettier：

                        1. Prettier不可以对任何语法检测、限制和修复

                        2. Prettier可以对多种代码风格，包括js、jsx、ts、json、css、less、scss、html、vue等等进行格式化

从上面两点比较可以看出，Eslint对代码语法检测限制和修复更专业，而Prettier对代码风格更专业，所以项目中Eslint可以检测语法中潜在的问题，比如定义某个变量却没有使用，这时候Eslin会发出警告，Prettier专门做格式化，统一团队中所有人的代码风格。

所以项目中，Eslint做语法检测，Prettier做格式化，但是Eslint中也有对代码的格式化功能，会不会和Prettier的格式化冲突？会，但是可以解决，很简单，用eslint-plugin-prettier关掉所有和prettier冲突的eslint配置，也就是以prettier为主，相当于prettier接管了eslint中代码格式的问题，而语法校验依然用的是eslint，这样两者就完美结合了

下面是针对vue2（vue3不同，但是大同小异）的Eslint和Prettier需要的插件：

 插件装完以后就需要配置Eslint和Prettier规则了，在项目根目录下新建.eslintrc.js文件  和.prettierrc.js文件，如下图：

.eslintrc.js文件 内容如下：

module.exports = {
	root: true,
	parserOptions: {
		parser: 'babel-eslint'
	},
	env: {
		browser: true,
		node: true,
		es6: true
	},
	extends: [
		'eslint:recommended',
		'plugin:vue/strongly-recommended',
		'@vue/standard'
	],
	// 添加规则
	/**
	 * eslint https://eslint.bootcss.com/docs/rules/
	 * vue扩展 https://github.com/vuejs/eslint-plugin-vue/tree/v6.2.2/docs/rules
	 * https://eslint.vuejs.org/rules/
	 * 0 or 'off'
	 * 1 or 'warn'
	 * 2 or 'error'
	 */
	rules: {
		semi: 0,
		'space-before-function-paren': 0,
		// 最大属性每行
		'vue/max-attributes-per-line': [
			2,
			{
				singleline: 5, // 一行是最大属性数
				multiline: {
					max: 1, // 多行是最大属性数
					allowFirstLine: false // 是否允许属性和标签在同一行
				}
			}
		],
		// 自定义属性断字  my-prop  (always,never,ignore)
		'vue/attribute-hyphenation': [0, 'always'],
		// html标签自关闭
		'vue/html-self-closing': [
			1,
			{
				html: {
					void: 'always',
					normal: 'always',
					component: 'always'
				},
				svg: 'always',
				math: 'always'
			}
		],
		// 组件名称模板  PascalCase,kebab-case,registeredComponentsOnly,ignores
		// 'vue/component-name-in-template-casing': [1, 'kebab-case'],
		'vue/component-name-in-template-casing': 0,
		// 结束括号间距  关闭>标签括号之前强制执行一致的间距样式
		'vue/html-closing-bracket-spacing': 0,
		// 单行元素的内容前后换行
		'vue/singleline-html-element-content-newline': 0,
		// 禁止注册模板中未使用的组件
		'vue/no-unused-components': 1,
		// 多行元素的内容前后换行
		'vue/multiline-html-element-content-newline': 0,
		// 禁止在与 v-for 相同的元素上使用 v-if
		'vue/no-use-v-if-with-v-for': 1,
		// 要求或禁止在标签的右括号前换行
		'vue/html-closing-bracket-newline': 0,
		// template模板js解析错误
		'vue/no-parsing-error': 1,
		// vue组件的name必须使用大驼峰式命名
		'vue/name-property-casing': [1, 'PascalCase'],
		// 强制组建中方法顺序
		'vue/order-in-components': 2,
		// 强制执行有效的 `v-show` 指令
		'vue/valid-v-show': 1,
		// 要求使用 `===` 和 `!==`
		'vue/eqeqeq': 2,
		// 	禁用 console
		'no-console': 0,
		// 禁用 tab
		'no-tabs': 0,
		// 禁用 var
		'no-var': 1,
		// 强制使用一致的反勾号、双引号或单引号
		quotes: [
			2,
			'single', // 要求尽可能地使用单引号
			{
				avoidEscape: true, // 允许字符串使用单引号或双引号
				allowTemplateLiterals: true // 允许字符串使用反勾号
			}
		],
		// 禁止删除变量
		'no-delete-var': 2,
		// 要求使用 const 声明那些声明后不再被修改的变量
		'prefer-const': [
			2,
			{
				ignoreReadBeforeAssign: false
			}
		],
		// 强制 generator 函数中 * 号周围有空格  es6 Generators函数
		'generator-star-spacing': 'off',
		// 禁止混合使用不同的操作符 运算符
		'no-mixed-operators': 0,
		// 强制箭头函数的箭头前后使用一致的空格（--fix)
		'arrow-spacing': 1,
		// 禁止或强制在代码块中开括号前和闭括号后有空格（--fix)
		'block-spacing': 1,
		// 不允许在 case 子句中使用词法声明
		'no-case-declarations': 1,
		// 要求使用骆驼拼写法
		camelcase: 0,
		indent: 'off',
		'vue/html-indent': 'off',
		'standard/computed-property-even-spacing': 0,
		'no-mixed-spaces-and-tabs': 0,
		'no-useless-escape': 0,
		'vue/no-multi-spaces': 0,
		'no-unexpected-multiline': 0
	}
};

 .prettierrc.js文件内容如下：

module.exports = {
	endOfLine: 'auto',
	// 书写宽度
	printWidth: 80,
	// 语句末尾打印分号
	semi: true,
	// 使用单引号
	singleQuote: true,
	// 尾随逗号
	trailingComma: 'none',
	// 在方法的花括号前面加空格
	spaceBeforeFunctionParen: true,
	// 用键位tab缩进
	useTabs: true,
	// 标签换行不完整问题
	htmlWhitespaceSensitivity: 'ignore',
	// 在唯一的箭头函数参数周围包含括号
	arrowParens: 'always'
};

到这里关于Eslint和Prettier的配置就结束了，但是还有一些需要注意的点，比如代码编辑器需要安装Eslint插件和Prettier插件，如下图：

 

 到这里就结束了？没有，还需要配置编辑器的默认格式化插件，这个在vscode的settings.json文件中配置即可，比如html、css、less、JavaScript、vue、json、typescript等等语言的默认格式化插件，这里都配置为Prettier，(settings.json)如下所示：

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // vscode默认启用了根据文件类型自动设置tabsize的选项
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #每次保存的时候自动格式化
  "editor.formatOnSave": true,
  // 当编辑器失去焦点时，自动保存更改了的编辑器
  "files.autoSave": "onFocusChange",
  // 配置文件关联 :任何 vue 后缀的文件会被认为是vue文件 
  "files.associations": {
    "*.vue": "vue"
  },
  // 编辑器字体大小
  "editor.fontSize": 18,
  // 若设置为 true，则自动从当前 Git 仓库的默认远程仓库提取提交
  "git.autofetch": true,
  // 在没有暂存的更改时提交所有更改
  "git.enableSmartCommit": true,
  // 每次保存的时候将代码按eslint格式进行修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 启用在vscode中重命名或者移动文件夹时自动更新导入路径的功能--js
  "javascript.updateImportsOnFileMove.enabled": "always",
  // 启用在vscode中重命名或者移动文件夹时自动更新导入路径的功能--ts
  "typescript.updateImportsOnFileMove.enabled": "always",
  // 每次保存的时候以下文件类型将代码按eslint格式进行修复
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
  // 路径映射
  "alias-skip.mappings": {
    "@": "/src",
    "~@/": "/src",
    "views": "/src/views"
  },
  // 在文件路径中指定要替换的前缀
  "vue-helper.componentPrefix": {  
    "alias": "@",
    "path": "src"
  },
}

到这里就真的结束了。

彩蛋：如果上面关于vscode的settings.json配置需要团队中所有人都统一，这样带来的好处是，比如团队中有四五个人甚至更多人，你就不需要挨个挨个教他们配置，甚至还要看他们配置的对不对，而且你还可以告诉团队中的人Eslint+Prettier需要安装的vscode插件，做法非常简单，可以看下面的文章：

项目中多人协作开发，统一编辑器vscode的配置_liqifengmu的博客-CSDN博客