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

本文详细介绍如何在VSCode中配置Vue项目,包括安装Vetur、ESLint等插件,设置EditorConfig,以及如何集成Prettier和ESLint进行代码格式化与检查,确保代码规范与质量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

安装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(内置prettier)
.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\\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

搭配vue-property-decorator 使用

cnpm i -D @typescript-eslint/parser vue-property-decorator
eslint配置文件增加解析器选项 parserOptions
.eslintrc.js

module.exports = {
	root: true,
	parserOptions: { 
        parser: '@typescript-eslint/parser'
    },
	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,
	}
}

参考文档

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值