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

最新推荐文章于 2025-05-15 09:10:15 发布

原创最新推荐文章于 2025-05-15 09:10:15 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#项目架构 #visual studio code #前端

架构设计同时被 2 个专栏收录

5 篇文章

订阅专栏

前端基础建设

3 篇文章

订阅专栏

本文详细介绍如何在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,
	}
}