Eslint+Prettier

1. vscode商城安装插件：Prettier 和 Eslint

   • 作用：本地写代码调试作用

2. vscode settings.json配置

{
	// "terminal.integrated.shell.osx": "/bin/zsh",
	// 终端cmd字号
	// "terminal.integrated.fontSize": 12,
	"terminal.integrated.tabs.enabled": true,
	// "window.menuBarVisibility": "toggle",

	// 启用/禁用导航路径
	"breadcrumbs.enabled": true,

	// 工作台状态栏是否可见
	// "workbench.statusBar.feedback.visible":false,
	"git.ignoreMissingGitWarning": true,
	"git.confirmSync": false,
	// 在资源管理器删除内容时候是否进行用户提醒
	"explorer.confirmDelete": false,
	// 控制在资源管理器内拖放移动文件或文件夹时是否进行确认
	"explorer.confirmDragAndDrop": false,
	"emmet.includeLanguages": {
		"wxml": "html"
	},
	// 启用后，按下 TAB 键，将展开 Emmet 缩写。
	"emmet.triggerExpansionOnTab": true,

	"diffEditor.ignoreTrimWhitespace": false,

	"[html]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		// 禁止eslint对html进行校验
		"editor.codeActionsOnSave": {
			"source.fixAll.eslint": false
		}
	},
	"[css]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[scss]": {
		"editor.defaultFormatter": "michelemelluso.code-beautifier"
	},
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode" // js文件采用prettier进行格式化
	},
	"[vue]": {
		"editor.defaultFormatter": "octref.vetur"
	},
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[jsonc]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},

	// 格式化stylus, 需安装Manta's Stylus Supremacy插件
	"stylusSupremacy.insertColons": false, // 是否插入冒号
	"stylusSupremacy.insertSemicolons": false, // 是否插入分号
	"stylusSupremacy.insertBraces": false, // 是否插入大括号
	"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
	"stylusSupremacy.insertNewLineAroundBlocks": false,

	//  #让函数(名)和后面的括号之间加个空格
	"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
	"javascript.updateImportsOnFileMove.enabled": "always",
	"javascript.format.enable": false, // 禁用vscode默认的js格式化插件

	"editor.formatOnType": true,
	"editor.formatOnSave": true,
	"editor.tabSize": 2,
	"editor.fontSize": 14,
	// 不检查缩进，保存后统一按设置项来设置
	"editor.detectIndentation": false,
	//是否自动换行
	"editor.wordWrap": "on",
	// 保存文件时进行eslint修复(MacOS：快捷键是 command + s ),并不能修复所有问题，多数还是需要手动修复
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	// 添加多个光标时候需要的快捷键
	"editor.multiCursorModifier": "ctrlCmd",
	// 自定义代码片段显示的位置
	"editor.snippetSuggestions": "top",

	// #每次保存的时候将代码按eslint格式进行修复
	// "eslint.autoFixOnSave": true,
	// 是否为JavaScript文件开启eslint检测
	// "eslint.enable": true,
	// 保存之后进行lint
	"eslint.run": "onSave",
	// 是否启用eslint的调试模式
	"eslint.debug": true,
	// "eslint.validate": [
	//   "javascript",
	//   "javascriptreact",
	//   {
	//     "language": "vue",
	//     "autoFix": true
	//   }
	// ],// 添加 vue 支持
	"eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
	"eslint.format.enable": true,
	"eslint.codeAction.showDocumentation": {
		"enable": true
	},

	"prettier.singleQuote": true, //  #使用单引号替代双引号
	"prettier.semi": false, //  #去掉代码结尾的分号
	"prettier.tabWidth": 2,
	"prettier.arrowParens": "avoid",
	"prettier.useTabs": true,
	// "prettier.eslintIntegration": false, // #让prettier使用eslint的代码格式进行校验
	"prettier.useEditorConfig": false, // 这句可以解决自动加分号

	// "vetur.format.defaultFormatter.html": "js-beautify-html", // #这个按用户自身习惯选择
	"vetur.format.defaultFormatter.html": "js-beautify-html", // #这个按用户自身习惯选择
	"vetur.format.defaultFormatter.js": "vscode-typescript", // #让vue中的js按编辑器自带的ts格式进行格式化
	"vetur.format.defaultFormatterOptions": {
		"js-beautify-html": {
			// #vue组件中html代码格式化样式
			"wrap_attributes": "auto", //也可以设置为“auto”，效果会不一样
			"wrap_line_length": "auto",
			"end_with_newline": true,
			"semi": false,
			"singleQuote": true
		},
		"prettier": {
			"semi": false,
			"singleQuote": true
		}
	},

	"timeline.excludeSources": ["git-history"],

	"files.autoSave": "afterDelay",
	"files.associations": {
		"*.cjson": "jsonc",
		"*.wxss": "css",
		"*.wxs": "javascript",
		"*.js": "javascript",
		"*.tsx": "typescriptreact"
	},
	"fileheader.LastModifiedBy": "code300",
	"fileheader.Author": "code300",
	"fileheader.configObj": {
		"createFileTime": true,
		"language": {
			"languagetest": {
				"head": "/$$",
				"middle": " $ @",
				"end": " $/",
				"functionSymbol": {
					"head": "/** ",
					"middle": " * @",
					"end": " */"
				},
				"functionParams": "js"
			}
		},
		"autoAdd": true,
		"autoAddLine": 100,
		"autoAlready": true,
		"annotationStr": {
			"head": "/*",
			"middle": " * @",
			"end": " */",
			"use": false
		},
		"headInsertLine": {
			"php": 2,
			"sh": 2
		},
		"beforeAnnotation": {
			"文件后缀": "该文件后缀的头部注释之前添加某些内容"
		},
		"afterAnnotation": {
			"文件后缀": "该文件后缀的头部注释之后添加某些内容"
		},
		"specialOptions": {
			"特殊字段": "自定义比如LastEditTime/LastEditors"
		},
		"switch": {
			"newlineAddAnnotation": true
		},
		"supportAutoLanguage": [],
		"prohibitAutoAdd": ["json"],
		"folderBlacklist": ["node_modules", "文件夹禁止自动添加头部注释"],
		"prohibitItemAutoAdd": [
			"项目的全称, 整个项目禁止自动添加头部注释, 可以使用快捷键添加"
		],
		"moveCursor": true,
		"dateFormat": "YYYY-MM-DD HH:mm:ss",
		"atSymbol": ["@", "@"],
		"atSymbolObj": {
			"文件后缀": ["头部注释@符号", "函数注释@符号"]
		},
		"colon": [": ", ": "],
		"colonObj": {
			"文件后缀": ["头部注释冒号", "函数注释冒号"]
		},
		"filePathColon": "路径分隔符替换",
		"showErrorMessage": false,
		"writeLog": false,
		"wideSame": false,
		"wideNum": 13,
		"functionWideNum": 0,
		"CheckFileChange": false,
		"createHeader": false,
		"useWorker": false,
		"designAddHead": false,
		"headDesignName": "random",
		"headDesign": false,
		"cursorModeInternalAll": {},
		"openFunctionParamsCheck": true,
		"functionParamsShape": ["{", "}"],
		"functionBlankSpaceAll": {},
		"functionTypeSymbol": "*",
		"typeParamOrder": "type param",
		"customHasHeadEnd": {},
		"throttleTime": 60000,
		"functionParamAddStr": "",
		"NoMatchParams": "no show param"
	},
	"dart.openDevTools": "flutter",
	"[dart]": {
		"editor.formatOnSave": true,
		"editor.formatOnType": true,
		"editor.rulers": [80],
		"editor.selectionHighlight": false,
		"editor.suggest.snippetsPreventQuickSuggestions": false,
		"editor.suggestSelection": "first",
		"editor.tabCompletion": "onlySnippets",
		"editor.wordBasedSuggestions": false
	},
	"window.zoomLevel": 1
}

3. 项目根目录创建文件.eslintrc.js和.prettierrc.js .eslintrc/.eslintrc.js和.prettierrc/.prettierrc.js .eslintrc默认json格式{..}，.eslintrc.js是js格式module.exports={...}

// .eslintrc
{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": ["@vue/prettier", "plugin:vue/vue3-essential", "eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["vue"],
  "rules": {
    "prettier/prettier": "warn"
  }
}

// prettierrc.js
module.exports = {
    arrowParens: 'avoid',
    printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
    // "tabWidth": "80", //一个tab代表几个空格数，默认为80
    useTabs: true, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
    singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
    semi: false, //行位是否使用分号，默认为true
    trailingComma: 'none', //是否使用尾逗号，有三个可选值"<none|es5|all>"
    bracketSpacing: true, //对象大括号之间是否有空格，默认为true，效果：{ foo: bar }
    parser: 'babel' //代码的解析引擎，默认为babylon，与babel相同。
}

4. 安装：

npm i eslint @vue/eslint-config-prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier -D

eslint会按照prettier的规则来格式化文件。

eslint主要起到错误提示的逻辑检测作用。

每次修改完规则后，都需要重启vscode才会生效。

Eslint官网：cn.eslint.org/docs/rules/