一、安装以下三个扩展程序

1.ESLint

● javascript代码检语法测工具，可以配置每次保存时格式化js
● 每次保存时只格式化部分代码，需要连续按住Ctrl+S多次才能格式化完成

2.Prettier - Code formatter

● 只关注格式化，并不具有eslint检查语法等能力，
● 支持JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

3.Vetur

● 支持格式化html、标准css、标准js、vue文件

二、配置setting.json

1.打开setting.json文件

2.编辑setting.json文件

{"editor.formatOnType": true, //编辑时是否自动格式化"editor.formatOnSave": true, //保存时是否自动格式化"editor.formatOnPaste": true, //粘贴时是否自动格式化"editor.wordWrapColumn": 500, //视图每行最大字符数"editor.wordWrap": "wordWrapColumn", //视图自动换行控制(视觉上折行，不增加代码行数)，超出wordWrapColumn设置的值折行"editor.renderIndentGuides": false, //编写代码时是否给出对齐连线//"editor.codeActionsOnSave": { //    "source.fixAll.eslint": true // 代码保存时按照eslint规则修复//},"editor.tabSize": 2, // tab默认两个空格"prettier.semi": true, //是否添加结束分号"prettier.singleQuote": true, //是否使用单引号"prettier.trailingComma": "none", // 是否在末尾自动添加逗号"prettier.tabWidth": 4, //tab缩进为4个空格字符"prettier.printWidth": 500, //代码每行最大字符数，超出换行(会增加行数)"vetur.format.options.tabSize": 4, //tab缩进为4个空格"vetur.format.defaultFormatter.html": "js-beautify-html", //html格式化规则(解决属性换行问题)"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化(解决属性换行问题)"vetur.format.defaultFormatter.ts": "vscode-typescript", //让vue中的ts按编辑器自带的ts格式进行格式化(解决属性换行问题) "vetur.format.defaultFormatterOptions": {"js-beautify-html": { //vue文件html相关"wrap_attributes": "aligned-multiple" //以下为取值说明// - auto: 仅在超出行长度时才对属性进行换行。// - force: 对除第一个属性外的其他每个属性进行换行。// - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。// - force-expand-multiline: 对每个属性进行换行。// - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。},"prettyhtml": { //vue文件html相关"printWidth": 500, //每行最大字符数，超出换行(会增加行数)"singleQuote": false, //是否使用单引号"wrapAttributes": false, //属性换行"sortAttributes": false  //属性排序},"prettier": { //vue文件js相关"semi": true, //是否添加结束分号"singleQuote": true //是否使用单引号}},"vetur.validation.template": false, //是否检测模板中的语法
}

或

{"editor.formatOnSave": true, // 每次保存自动格式化"editor.codeActionsOnSave": {"source.fixAll.eslint": true // 每次保存的时候将代码按eslint格式进行修复},"editor.defaultFormatter": "esbenp.prettier-vscode","[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode" // vue文件默认格式化方式},// vetur格式化配置"vetur.format.defaultFormatter.html": "js-beautify-html","vetur.format.options.tabSize": 2,"vetur.format.defaultFormatterOptions": {"js-beautify-html": {"wrap_attributes": "auto"}},"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数前加上空格 只有在默认vetur的时候生效// js文件默认格式化方式 和vue中的js保持一致使用编辑器自带的ts格式"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode" // js文件默认格式化方式prettier},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode" // json文件默认格式化方式prettier},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"  // css文件默认格式化方式prettier},"[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode" // typescript文件默认格式化方式prettier},"editor.fontSize": 16, // 字体大小"editor.wordWrap": "on", // 控制折行方式 - "on" (根据视区宽度折行)"editor.tabSize": 2, // 换行默认以tab缩进 2个字符"editor.colorDecorators": false, // 控制编辑器是否显示内联颜色修饰器和颜色选取器。"editor.snippetSuggestions": "top", // 将建议的代码段优先级提前选择，比如输入for第一个提示是for循环代码段。"files.associations": {// 文件关联语言的优先级配置"*.js": "javascriptreact","*.vue": "vue","*.cshtml": "html","*.dwt": "html"},"window.zoomLevel": -1,"files.autoSave": "onFocusChange","editor.formatOnPaste": true
}

如果prettier默认格式化规则不符合要求，在项目根目录创建.prettierrc.json文件覆盖默认格式化规则

.prettierrc.json

{"singleQuote": true,"semi": true,"trailingComma": "all", // 数组、对象属性最后加逗号"arrowParens": "always" // 箭头函数参数总是用括号包起来
}

三、eslint语法检测

请看另一篇文章：https://blog.csdn.net/lihefei_coder/article/details/92540985

VScode代码格式化及语法检测相关推荐

vscode 代码格式化及快捷键
VSCode 代码格式化快捷键 On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu Ctrl + Shift + I 代码格 ...
VSCode 代码格式化的快捷键
Visual Studio Code可以通过以下快捷键格式化代码: On Windows Shift + Alt + F On Mac Shift + Option + F On Ubuntu ...
vscode 代码格式化
目录 1 安装插件 2 设置vscode代码格式化 1 安装插件 (目的是记录自己安装的插件) 2 设置vscode代码格式化打开vscode,搜索C_Cpp: Clang_format_fallb ...
vscode代码格式化js自动换行问题
vscode代码格式化js自动换行问题如果设置了默认格式化是使用自带JavaScript和Typescript的语言功能会看的吐血类似下面这种 // 使用自带JavaScript和Typescri ...
三步搞定 vscode 代码格式化
一.安装以下几个 vscode 扩展程序: ESLint Prettier - Code formatter Vetur 如图: 二.打开 settings 文件打开方式: 先按步骤打开 setti ...
VSCode代码格式化快捷键
我们在编写代码和阅读别人代码的时候,容易出现同级元素缩进没有对齐的情况,我们需对代码进行格式化,以方便自己和他人的阅读. 在vscode中使用快捷键 Shift+Alt+F 使用示例: 出现了代码没 ...
VSCode代码格式化
一.如何在VSCode页面内进行代码格式化二.如何在保存代码时自动格式化代码 1.在VSCode中进行代码格式化: 方法一:右键选择"格式化文档" 方法二:shift+alt+F ...
mac下vscode代码格式化及其他常用快捷键
工作中暂时所用到的快捷键: (一) 代码格式化: 快捷键:shift + option + F (二)选中方法,跳进方法快捷键:command + 鼠标左键 (三)选中方法进行查看方法实用位置快捷 ...
VSCode代码格式化快捷键及保存时自动格式化
一.实现vs code中代码格式化快捷键:[Shift]+[Alt]+F 二.实现保存时自动代码格式化: 1)文件 ------.>[首选项]---------->[设置]: 2)搜索em ...

VScode代码格式化及语法检测