vscode 支持自动格式化vue、ts、json文件主要体现于新创建的vue项目，老项目因为修改会过于多，怕出现问题所

前端代码规范使用eslint airbnb 规则 blog.csdn.net/caoyan0829/…

主要体现于新创建的vue项目，老项目因为修改会过于多，怕出现问题所以先不用eslint规范，但可以使用一些代码格式规范，比如空行等。

1、创建vue项目后全局安装eslint

npm install eslint -g

2、创建eslint配置

项目目录下执行 eslint --init （可根据情况修改）

选择好后会自动安装airbnb的依赖

安装好后根目录会有一个。.eslinttrc文件，这是eslint的配置文件

3、创建一个.eslintignore文件用来忽略eslint检测哪些文件

配置：

/build/

/config/

/dist/

/*.js

（根据实际情况修改）

4、全局安装vue eslint插件

npm i -g eslint-plugin-vue

5、vscode安装eslint、Beautify插件、vetur插件

6、其他相关配置

vscode编辑器依次打开文件-首选项-设置-扩展-在seetings.json中编辑

在你已有的配置后加上下面这些配置

{    "terminal.integrated.shell.osx": "/bin/zsh",    "files.autoSave": "afterDelay",    "[typescriptreact]": {        "editor.defaultFormatter": "esbenp.prettier-vscode"    },    "[json]": {        "editor.defaultFormatter": "esbenp.prettier-vscode"    },    "[less]": {        "editor.defaultFormatter": "esbenp.prettier-vscode"    },    "files.exclude": {        "node_modules": true    },    "explorer.confirmDelete": false,    "prettier.jsxSingleQuote": true,    "prettier.singleQuote": true,    "emmet.includeLanguages": {        "javascript": "javascriptreact"    },    "terminal.integrated.rendererType": "dom",    "background.style": {        "opacity": 0.1    },    "background.enabled": true,    "editor.formatOnSave": true,    "vetur.format.defaultFormatter.html": "js-beautify-html",    "vetur.format.defaultFormatter.js": "vscode-typescript",    "beautify.config": {        "brace_style": "collapse,preserve-inline"    },    "vetur.format.options.tabSize": 2,    "vetur.format.defaultFormatterOptions": {        "prettier": {            "singleQuote": true,            "semi": false,            "trailingComma": "all",            "printWidth": 200        },        "js-beautify-html": {            "wrap_attributes": "auto",            "wrap_line_length": 200,            "end_with_newline": false        },        "prettyhtml": {            "singleQuote": true,            "wrapAttributes": false,            "sortAttributes": false        }    },    "editor.tabSize": 4,    "editor.codeActionsOnSave": {        "source.fixAll.eslint": true    }}

打开.eslintrc文件，在rules里配置：因为eslint airbnb有些规则有点不人性化，所以需要自己修改一些，我暂时修改了下面一些配置，以后有发现欢迎补充

"linebreak-style": [0, "error", "windows"],   //代码行尾检测关闭
"class-methods-use-this": "off",    // 关闭强制使用this
"no-console": "off",  //可以使用console
"semi": 0,  // 关闭检测分号
"import/no-extraneous-dependencies": ["error", {   //关闭引入文件时的eslint检测
"devDependencies": true
}],
"lines-between-class-members": "off"   // 关闭每个类之间的空行

至此，配置完成，点开一个vue文件试一下保存会不会自动格式化

vscode 执行 code . 使用vscode打开当前项目

手动打开vscode
command + shift + p 打开命令面板（或者点击菜单栏查看>命令面板）
输入shell（选择"install code command in PATH"）
打开终端进入需要用IDE打开的文件夹输入"code ."

vscode 支持自动格式化vue、ts、json文件