分享前端自用的vscode插件,vue项目 eslint自动格式化规范

1.vetur:  这个不用说, 写vue必备
2. search node_modules：

        可以设置快捷键搜索node_modules文件夹内我们安装的包，很实用
3. prettier

        格式化代码必备
4. path intellisense

        引入文件时的路径提示
5. live server

        快速开启一个服务器，打开网页
6. html snippets

        用于快速生成代码片段骨架
7. html css support

        在html中写CSS有提示， 需要在vscode 设置的json中添加代码才能生效
8. auto rename tag

        前端必备， 标签自动同步修改
9. auto close tag

        前端必备，  标签自动闭合
10. debugger for chrome

vscode官方插件

11. ESlint

前端规范神器， 配合typescript使用更佳，能够有效减少代码的错误概率， 配合自动格式化配置使用，自动格式化代码规范，可以参考我的配置

下面是自用的settings.json配置文件

         格式化.vue文件默认选择vetur工具，格式js文件，请选择vscode自带vscode-typescript。

        配合eslint使用，效率提高一百倍，请参看.eslintrc.js配置

        

{
	"workbench.iconTheme": "material-icon-theme", // 指定工作台中使用的文件图标主题
	"window.zoomLevel": 0, // 调整窗口的缩放级别，原始大小是 0
	"editor.formatOnSave": true, // 在保存时格式化文件
	"editor.tabSize": 4, // 一个制表符等于的空格数
	"[jsonc]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode" // 定义一个默认格式化程序
	},
	"[javascript]": {
		"editor.defaultFormatter": "vscode.typescript-language-features" // 定义一个默认格式化程序
	},
	"[vue]": {
		"editor.defaultFormatter": "octref.vetur" // 定义一个默认格式化程序
	},
	"files.autoSave": "off", // 控制自动保存未保存的编辑器
	"git.confirmSync": false, // 同步Git存储库前请先进行确认
	"javascript.format.insertSpaceBeforeFunctionParenthesis": false, // 让函数名和后面的括号之间加个空格
	"vetur.format.options.tabSize": 4, // 每个缩进级别的空格数，由所有格式化程序继承
	"vetur.format.scriptInitialIndent": false, // js部分是否有初始缩进
	"vetur.format.defaultFormatter.js": "vscode-typescript",
	"vetur.format.defaultFormatter.html": "js-beautify-html",
	"vetur.format.defaultFormatterOptions": {
		"js-beautify-html": {
			// - auto: 仅在超出行长度时才对属性进行换行
			// - force: 对除第一个属性外的其他每个属性进行换行
			// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐
			// - force-expand-multiline: 对每个属性进行换行
			// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐
			"wrap_attributes": "force-expand-multiline", // 属性折行对齐方式
			"wrap_line_length": 120, // 设置一行多少字符换行
			"semi": false, // 是否在每行末尾添加分号
			"singleQuote": true, // 使用单引号
			"end_with_newline": false
		}
	},
	/* eslint.validate , eslint.autoFixOnSave 配合eslint插件, 自动格式化代码规范*/
	"eslint.validate": ["javascript", "javascriptreact", { "language": "vue", "autoFix": true }],
	"eslint.autoFixOnSave": true,
	"prettier.jsxSingleQuote": true,
	"prettier.printWidth": 120,
	"prettier.singleQuote": true,
	"prettier.tabWidth": 4,
	"prettier.useTabs": true,
	"terminal.integrated.defaultProfile.windows": "Command Prompt",
	"[json]": {
		"editor.defaultFormatter": "vscode.json-language-features"
	},
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	"workbench.colorTheme": "Noctis",
    // html写css有提示，需要安装插件
	"editor.parameterHints.enabled": true,
	"editor.quickSuggestions": {
		"other": true,
		"comments": true,
		"strings": true
	}
}

.eslintrc.js配置，需要安装开发环境插件包

        rules： 可以根据自己实际情况配置， 自行百度

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/standard'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    indent: ['off', 2],
    'space-before-function-paren': 0,
    'eol-last': 0,
    'vue/multi-word-component-names': 0
  },
  globals: {
    //此处可配置window对象上的属性， 也就是全局属性， 不配置的话使用全局属性时eslint会提示报错，格式如下
    // AMap: true
  }
}

开发环境插件包, 一般不用看版本，直接安装就行

 "devDependencies": {
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "babel-plugin-import": "^1.13.3",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-standard": "^5.0.0",
    "eslint-plugin-vue": "^8.0.3",
  },

 使用eslint插件开发很舒服

全部配置完成， 写完代码保存时即可自动格式化规范了。