vue3项目配置eslint、prettier

eslint、prettier

ESLint 是JavaScript和JSX检查工具

prettier 代码格式化工具

安装依赖

#安装eslint
npm install --save-dev eslint eslint-plugin-vue

#安装prettier
npm install --save-dev prettier eslint-plugin-prettier @vue/eslint-config-prettier

#typescript支持
#npm install --save-dev @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

配置

新建.eslintrc.js、.eslintignore、.prettierrc.json文件

.eslintrc.js

module.exports = {
	root: true,
	env: {
		node: true
	},
	extends: [
		'plugin:vue/vue3-essential',
		'eslint:recommended',
		'prettier',
		'@vue/prettier',
        // typescript支持
        // '@vue/typescript/recommended',
		// '@vue/prettier/@typescript-eslint'
	],
	plugins: ['prettier'],
	parserOptions: {
		ecmaVersion: 2017
	},
	rules: {
		'prettier/prettier': 'error',
		'arrow-body-style': 'off',
		'prefer-arrow-callback': 'off'
	},
	overrides: [
		{
			files: [
				'**/__tests__/*.{j,t}s?(x)',
				'**/tests/unit/**/*.spec.{j,t}s?(x)'
			],
			env: {
				mocha: true
			}
		}
	],
	globals: {
		defineProps: 'readonly'
	}
};

.eslintignore

/node_modules/
/public/
.vscode

.prettierrc.json

{
	"semi": true,
	"eslintIntegration": true,
	"singleQuote": true,
	"endOfLine": "lf",
	"tabWidth": 2,
	"trailingComma": "none",
	"bracketSpacing": true,
	"arrowParens": "avoid"
}

vscode保存时自动检查并格式化

1、安装ESLint插件
2、修改vscode配置

"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "eslint.autoFixOnSave" : true,
    }, 
"eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],