vue老项目中配置eslint和prettier

 1. eslint--代码规范检查并做部分修复，prettier---统一代码格式，如果希望保存ctrl+s后自动格式化代码还需要配置vscode的settings.json文件。

2. 安装vscode插件

                安装eslint插件

        

                安装prettier插件

        

                

3. 安装依赖

   安装eslit

npx eslint --init

打开.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标签自关闭
		// 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 // 这是一个避免与 no-use-before-define 规则（不带 'nofunc' 选项）产生冲突的选项。如果为 true，该规则将忽略声明和第一次赋值之间的变量。默认为 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
	}
};

安装prettier

npm install --save-dev prettier

在项目根目录新建 .prettierrc.js文件并打开添加配置

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

4. 解决eslint配置和prettier配置的冲突问题 

冲突的本质在于 eslint既负责了代码质量检测，又负责了一部分的格式美化工作，格式化的部分规则和 prettier不兼容。

打开.eslintrc.js文件，在extends中添加"plugin:prettier/recommended"，这样写的目的是让pettier的规则，放在eslint规则扩展中。

extends: [
    'eslint:recommended',
	'plugin:vue/strongly-recommended',
	'@vue/standard',
    'plugin:prettier/recommended',
],

5. 让vscode自动保存代码并进行格式化 

这个需要在vscode中进行配置，按住ctrl+shift+p，输入setting，打开setting.json，完成以下配置：

 // 保存时自动启用 eslint --fix 自动修复
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
      "eslint.autoFixOnSave": true
    },

    // 每次保存的时候以下文件类型将代码按eslint格式进行修复
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "html",
      "vue"
    ],

    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,

    // 当编辑器失去焦点时，自动保存更改了的编辑器
    "files.autoSave": "onFocusChange",

 6. 在package.json中配置新指令

"scripts": {
  "lint": "vue-cli-service lint",
  "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
  "prettier": "prettier --write .",
},

运行npm run lint 进行全局检查和修复
运行npm run prettier 进行全局prettier格式化