VSCode设置eslint自动缩进和自动格式化代码

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 8.9k累计阅读 8.9k平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄11年

关注

原创最新推荐文章于 2023-09-27 13:57:41 发布 8.9k 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

文章目录

VSCode设置eslint自动缩进和自动格式化代码

VSCode设置eslint自动缩进和自动格式化代码

1、找到VS Code的settings.json文件

（1）点击左下角齿轮图标并选择设置：
（2）在文本编辑器中找到 settings.json
在这里插入图片描述 settings.json的初始内容：

2、修改settings.json文件内容为如下内容

{
    "editor.renderWhitespace": "none",
    //自动缩进的开关，设置为true则打开自动缩进开关
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.format.enable": true,
}

在这里插入图片描述

3、打开项目根文件夹下的 .eslintrc.js文件

在这里插入图片描述

4、在rules 下配置“缩进几个空格”

rules: {
        indent: [2, 4, { SwitchCase: 1 }],
        "prettier/prettier": [2, { tabWidth: 4, endOfLine: "auto" }],
        "no-console": "off",
        "no-debugger": "off",
        "vue/multi-word-component-names": 0,

        // 解决let被强转为const问题
        "prefer-const": 0,
        // 保存代码时缩进4个空格
        // indent: ["error", 4],
    },

在这里插入图片描述

5、配置完保存，结束配置。

收录于

前端

当前文章被收录于：

前端

6 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#vscode #ide #编辑器

本内容遵循 CC 4.0 BY-SA 版权协议

【VS Code】常用设置 vs code 常用设置阅读详情

相关推荐

VS Code 设置代码缩进

通过设置 VS Code 的代码缩进选项，我们可以根据个人的喜好和项目的要求来定制缩进规范。在本文中，我们介绍了如何设置代码缩进，并提供了一些常用的设置选项。在使用 VS Code 进行代码编写时，代码缩进是一项非常重要的设置。正确的代码缩进可以提高代码的可读性和可维护性，使代码结构更清晰。VS Code 是一款功能强大的开发环境，提供了丰富的设置选项来满足不同开发者的需求。完成上述步骤后，你的代码缩进设置就已经生效了。当你在编写代码时，VS Code 将根据你的设置自动缩进代码，提高代码的可读性。

DpgrMl的博客 7338

vscode代码自动格式化。

1.先下载两个插件 prettier和vetur 2.文件-首选项-设置-里面搜索格式化。选中下面的prettier 3.把设置变成编辑模式。 4.直接把下面的添加进去 { "editor.formatOnType": true, "editor.formatOnSave": true, "prettier.semi": true, "prettier.singleQuote": true, "editor.defaultFormatter": "esbenp.prettier-

weixin_47372236的博客 1万+

VScode常见用法

宇之日记 5916

VS code 自动调整代码格式

Date 20210802 By WJB 使用vscode编写代码时，代码格式调整比较麻烦，多余空格，多余空行等，代码不够美观，可读性差。可以通过vscode 设置（setting）实现代码自动格式化调整。设置过程如下：点击 vscode 软件左下角设置按钮打开设置界面后，右上角有个转为json的按钮，点击该按钮转为json。在数组中添加 "editor.formatOnType":true, "editor.formatOnSave":tr...

wangjianbo09的博客 1万+

vscode Eslint+Prettier自动格式化代码

安装插件列表 ESLint Prettier - Code formatter Prettier ESLint Vetur 配置项 settings.json { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请.

qq_38571305的博客 626

vscode 配合 eslint 自动格式化代码

vscode 配合 eslint 自动格式化代码 1. vscode安装eslint插件 2. 打开 vscode 的配置文件—— settings.json 点击左下角的设置或者输入ctrl+shift+p 找到Open Setting JSON 安装好以后，打开 vscode 的配置文件—— settings.json ，加上下面这几行规则： { "eslint.autoFixOnSave": true, "eslint.packageManager": "yarn", "

atu1111的博客 2002

vscode中eslint使用自动保存格式

1.在vscode的设置扩展中安装eslint插件 2.找到"文件" -> "首选项" -> "设置"(或者： File->Preferences->Settings )，点击右上角，切换到setting.json配置文件，替换为以下代码 { // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 4, // #...

pengfeng111833的专栏 1625

vscode 使用eslint格式化代码

weixin_45289656的博客 543

vscode代码格式化

// vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 4, // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F "editor.formatOnSave": false, // #每次保存的时候将代码按eslint格式进行修复 "eslin.

故事与我 1830

vscode配置代码自动格式化

{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": tr

weixin_44969308的博客 961

vscode的格式化问题

vscode的格式化问题一、先下载插件二、在setting.josn配置三、配置.editorconfig文件https://editorconfig.org 一、先下载插件在插件商店中下载三个插件 Beautify、Eslint、Vetur 二、在setting.josn配置 { // tab 大小为2个空格 "editor.tabSize": 2, // 100 列后换行 "editor.wordWrapColumn": 100, // 保存时格式化 "

weixin_57750091的博客 974

VScode 代码格式化 setting.json文件内容

{ // vscode默认启用了根据文件类型自动设置tabsize的选项 “editor.detectIndentation”: false, // 重新设定tabsize “editor.tabSize”: 4, // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F “editor.formatOnSave”: false, // #每次保存的时候将代码按eslint格式进行修复 “eslint.autoFixOnSave”: true, //.

qq_33286156的博客 1005

分享一下在vscode中写前端代码的插件和setting.json的配置

这是我下载的插件，大家可以参考一下接下来是在setting.json中的配置：首先按cirl+shift+p,输入open setting 点击进入，将下面代码复制代替原代码 { "editor.fontSize": 16, "eslint.autoFixOnSave": true, "fileheader.LastModifiedBy": "xudanfeng", "fileheader.Author": "xudanfeng"..

weixin_53655745的博客 1593

sql格式化 vscode_vs code保存自动格式化配置

{// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false,// 重新设定tabsize"editor.tabSize": 2,// #每次保存的时候自动格式化"editor.formatOnSave": true,// #每次保存的时候将代码按eslint格式进行修复// "eslint.autoFixOnSave":...

weixin_33831334的博客 1654

vscode 设置

版本一： { "editor.rulers": [ 100 ], //代码缩进线 "editor.tabSize": 2, "eslint.alwaysShowStatus": true, "eslint.autoFixOnSave": true, "eslint.packageManager": "yarn", "eslint.validate": [ "javascript", // 用eslint的规则检测j.

蓝冰凌的博客 399

VScode+ESlint 自动格式化代码(2021)

本文用 Vue 项目做示范，基于项目已有eslint环境。利用 Vue CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。 1、安装插件 ESLint， 2、配置eslint插件 File -> Preference-> Settings（如果装了中文插件包应该是文件 -> 选项 -> 设置），搜索 eslint，点击 Edit in setting.json 将以下选项添加到配置文件 //配置eslint "eslint.val

Superman_peng的博客 1万+

vscode配置文件

{ “files.autoSave”: “off”, “window.zoomLevel”: 0, “editor.detectIndentation”: false, “workbench.iconTheme”: “vscode-icons”, “eslint.autoFixOnSave”: true, “eslint.validate”: [ “javascript”, “javascript...

luwenze的博客 1432

vscode绿色、护眼色，vue自动格式化配置参考

{ "settings": { "workbench.colorTheme": "Atom One Light", "workbench.colorCustomizations": { "[Atom One Light]": { "editor.background": "#C7EDCC", "sideBar.background": "#C7EDCC", "activityBar.background": "#C7EDCC",

shalDream的博客 6666

vscode setting.json

{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, "workbench.iconTheme": "vscode-great-icons", "typescript.locale": "zh-CN", "editor.quickSuggestions": { "strings": true }, "javascript.format.insertSpaceBeforeFunctionParenthes

yalishandalee的专栏 168

上一篇：报错 org.apache.http.ConnectionClosedException: Premature end of Content-Length delimited message body

下一篇：前端下载文件实现方式及跨域下载方法

VS Code 设置代码缩进

DpgrMl的博客

09-27

7338