精华内容
下载资源
问答
  • 最近几天更新了 vsCode 的版本,目前所用的版本号为:1.43。其实每次更新 vsCode 版本号并没有感受到有什么明显的变化,只是日常顺手更新而已。而这一次 vsCode 真的是帮了我一个“大忙”。 众所周知我们写 html ...
  • Vue项目保存自动根据eslint格式化代码前提 前提 编辑器 Visual Studio Code(VS code) 插件 eslint 和 vetur 用户配置 文件 -> 首选项 -> 设置 settings.json { "eslint.autoFixOnSave": true, "eslint....

    保存自动根据eslint格式化代码

    • 编辑器
      Visual Studio Code(VS code)
    • 插件
      eslint 和 vetur
    • 用户配置
      文件 -> 首选项 -> 设置
      settings.json
    {
    	// 主题颜色 浅色主题 看个人喜好
    	"workbench.colorTheme": "Solarized Light",
    	"eslint.autoFixOnSave": true,
    	"eslint.options": {
    	    "extensions": [
    	        ".js",
    	        ".vue"
    	    ]
    	},
    	"eslint.validate": [
    	    "javascript",
    	    {
    	        "language": "html",
    	        "autoFix": true
    	    },
    	    {
    	        "language": "vue",
    	        "autoFix": true
    	    }
    	],
    	"vetur.format.defaultFormatter.js": "vscode-typescript",
    	"vetur.format.defaultFormatter.ts": "vscode-typescript",
    	"editor.codeActionsOnSave": {
    		"source.fixAll.eslint": true
    	}
    }
    
    

    eslint.autoFixOnSave用来进行保存时自动格式化,但是默认只支持 javascript .js 文件

    eslint.validate用来配置作用的文件类型。

    这样配置后,当你开发在.vue里保存代码时就会自动按照项目eslint格式要求格式化代码

    新版保存自动按eslint格式化代码

    发现上面vscode的保存自动根据eslint格式化代码失效了,于是上网找解决方法,将旧版的配置按下面改为新版的就可以正常

    新版配置(当前版本ESLint2.18)
    {
    	//autoFixedOnSave 设置已废弃,采用如下新的设置
    	"editor.codeActionsOnSave": {
    	  "source.fixAll.eslint": true
    	},
    	"eslint.format.enable": true,
    	//autoFix默认开启,只需输入字符串数组即可
    	"eslint.validate": ["javascript", "vue", "html"]
    }
    
    旧版配置
    {
    	//配置eslint
    	"eslint.autoFixOnSave": true,  //  启用保存时自动修复,默认只支持.js文件
    	"eslint.validate": [
    	   "javascript",  //  用eslint的规则检测js文件
    	   {
    	     "language": "vue",   // 检测vue文件
    	     "autoFix": true   //  为vue文件开启保存自动修复的功能
    	   },
    	   {
    	     "language": "html",
    	     "autoFix": true
    	   }
    	 ]
    }
    

    保存自动格式化代码(没有eslint配置文件时)

    • 编辑器
      Visual Studio Code(VS code)
    • 插件
    • Eslint
    • Vetur
    • Prettier - Code formatter

    用户配置
    文件 -> 首选项 -> 设置settings.json

    点击右上角的红色区域按钮(如下图),可以打开settings.json文件
    在这里插入图片描述

    {
        // 主题颜色 浅色主题
        "workbench.colorTheme": "Solarized Light",
        // tab 大小为2个空格
        "editor.tabSize": 2,
        // 100 列后换行
        "editor.wordWrapColumn": 100,
        // 保存时格式化
        "editor.formatOnSave": true,
        // 开启 vscode 文件路径导航
        "breadcrumbs.enabled": true,
        // prettier 设置语句末尾不加分号
        "prettier.semi": true,
        // prettier 设置强制单引号
        "prettier.singleQuote": true,
        // 选择 vue 文件中 template 的格式化工具
        "vetur.format.defaultFormatter.html": "prettyhtml",
        // 显示 markdown 中英文切换时产生的特殊字符
        "editor.renderControlCharacters": true,
        // 设置 eslint 保存时自动修复
        "eslint.autoFixOnSave": true,
        // eslint 检测文件类型
        "eslint.validate": [
            "javascript",
            "javascriptreact",
            {
                "language": "html",
                "autoFix": true
            },
            {
                "language": "vue",
                "autoFix": true
            }
        ],
        // vetur 的自定义设置
        "vetur.format.defaultFormatterOptions": {
            "prettier": {
                "singleQuote": true,
                "semi": false
            }
        },
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true
        },
        "files.associations": {
            "*.cjson": "jsonc",
            "*.wxss": "css",
            "*.wxs": "javascript"
        },
        "emmet.includeLanguages": {
            "wxml": "html"
        },
        "minapp-vscode.disableAutoConfig": true,
        "workbench.iconTheme": "vscode-icons",
        "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
        "eslint.migration.2_x": "off"
    }
    
    

    保存配置,保存格式化代码就会生效。

    配置解读(基于上面的配置)

    Eslint 和 Prettier 的区别

    Eslint

    eslint用来做代码风格检查,比较关注代码质量,并且会提示不符合风格规范的代码。除此之外 eslint 也具有一部分代码格式化的功能。
    这里我们先对 eslint 做对应的配置:

      // 保存时格式化
      "editor.formatOnSave": true,
      // 设置 eslint 保存时自动修复
      "eslint.autoFixOnSave": true,
    

    为什么说是一部分格式化的功能呢?这里给大家举个例子,如下图是用 eslint 格式化 js 文件的效果:
    在这里插入图片描述
    Eslint 的确格式化了代码,但是中间的空行并没有被格式化。

    Prettier

    Prettier本身就是用来做代码格式化的,准确的说它是来美化代码的,所以这方面有更大的优势。同时 Prettier 也是对 Eslint 格式化的基础上的一个极好的补充。

    那么两者都有格式化的功能,就不会有冲突吗?
    当然有了,不过只要简单的配置就可以解决了,比如语句末尾不加分号强制单引号等 eslint 风格检查。配置如下:

      // prettier 设置语句末尾不加分号
      "prettier.semi": false,
      // prettier 设置强制单引号
      "prettier.singleQuote": true,
    

    来看看效果,这下连空行也可以格式化了:
    在这里插入图片描述
    解决完上面的冲突,还剩下一个冲突,匿名函数后空格的问题,function ()(eslint 推荐)和 function()(prettier 推荐) 的冲突。我们后面继续说这个问题。下面来看对 vue 文件格式化的配置。

    vue 文件格式化配置(Vetur 配置)

    VScodevue有很大 的支持。对于 vue 的格式化,我们用到了 Vetur 插件
    Vetur 插件的格式化大多也是直接用的 prettier 规范。这也是我们选择 prettier 格式化代码的原因之一。

    Vetur 的格式化配置只需修改关于模版的部分就好了。

      // 选择 vue 文件中 template 的格式化工具
      "vetur.format.defaultFormatter.html": "prettyhtml",
    

    prettyhtml格式化 template 可以消除多余的空行,并且对属性超长的行可以合理换行显示。

    解决vue 文件和 html 文件,没有 eslint 风格提示。

    在 setting.json 文件中加入如下配置:

    // eslint 检测文件类型
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue"
          "autoFix": true
        }
      ]
    

    加上上面的配置后,vue文件,html文件就正常有风格提示 了

    function () (eslint 推荐)和 function() (prettier 推荐) 的风格冲突问题

    如果推崇 eslint 的规范,也就是 function () 这种的。那么恭喜你,你什么都不用改。

    如果推崇 prettier 的规范,也就是 function() 这种的。那么就需要改改了。

    先把 setting.jsoneslint.validate字段关于 vue 的自动修复功能注释掉。这样保证在格式化 vue 文件的时候,走prettier 的规范,而不再需要根据 eslint 的规范,进行 fix。

    这样做有个好处是,如果你的项目不需要配置 eslint 来检查代码 ,代码就不需要格式化为 eslint 的规范。

     {
        "language": "vue"
        // "autoFix": true
     }
    

    但是如果你的项目配置了 eslint,比如用 vue-cli 构建的项目,一般都会进行 eslint 检查。那么就在项目根目录的 eslintrc.js中添加下面的配置,这种情况就可以把 autoFix 的注释打开了。因为可以自动修复成 eslint的规范。

    // 自定义的规则
    module.exports = {
      rules: {
        'space-before-function-paren': 0
      }
    }
    

    谢谢你阅读到了最后
    期待你,点赞、评论、交流

    展开全文
  • 打开vscode的设置。setting.json文件,加入以下配置 "editor.formatOnSave": false, // 自动修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, // 配置 ESLint 检查的文件类型 "eslint....

    打开vscode的设置。setting.json文件,加入以下配置

       "editor.formatOnSave": false,
        // 自动修复
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true,
        },
        // 配置 ESLint 检查的文件类型
        "eslint.validate": ["javascript","vue","html"],
    
    展开全文
  • Vscode配置保存时自动格式化

    千次阅读 2020-11-27 17:12:37
    接着关闭vscode,找到vscode的安装根目录(如果vscode是默认安装在c盘的,可以按照:C:\Users\Administrator\AppData\Roaming\Code\User”。注意要把Administrator换成你的用户名),如下图:里面会有一个setting....
    1. 首先打开vscode,点击查看—点击扩展(或者直接按Ctrl+Shift+x),在搜索框中输入:Prettier ESLint,点击安装。详细如下图:

    1. 接着关闭vscode,找到vscode的安装根目录(如果vscode是默认安装在c盘的,可以按照:C:\Users\Administrator\AppData\Roaming\Code\User”。注意要把Administrator换成你的用户名),如下图:里面会有一个setting.json文件,用文本或者其它工具打开它,然后直接用一下的代码覆盖掉里面的所有代码:

    {

      "editor.quickSuggestions": {

        //开启自动显示建议

        "other": true,

        "comments": true,

        "strings": true

      },

      // vscode默认启用了根据文件类型自动设置tabsize的选项

      "editor.detectIndentation": false,

      // 重新设定tabsize

      "editor.tabSize": 2,

      // #每次保存的时候自动格式化

      "editor.formatOnSave": true,

      // #每次保存的时候将代码按eslint格式进行修复

      "eslint.autoFixOnSave": true,

      // 添加 vue 支持

      "eslint.validate": [

        "javascript",

        "javascriptreact",

        {

          "language": "html",

          "autoFix": true

        },

        {

          "language": "vue",

          "autoFix": true

        }

      ],

      //  #让prettier使用eslint的代码格式进行校验

      "prettier.eslintIntegration": true,

      //  #去掉代码结尾的分号

      "prettier.semi": false,

      //  #使用带引号替代双引号

      "prettier.singleQuote": true,

      //  #让函数(名)和后面的括号之间加个空格

      "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

      // #这个按用户自身习惯选择

      "vetur.format.defaultFormatter.html": "js-beautify-html",

      // #让vue中的js按编辑器自带的ts格式进行格式化

      "vetur.format.defaultFormatter.js": "vscode-typescript",

      "vetur.format.defaultFormatterOptions": {

        "js-beautify-html": {

          "wrap_attributes": "force-aligned"

          // #vue组件中html代码格式化样式

        }

      },

      // 格式化stylus, 需安装Manta's Stylus Supremacy插件

      "stylusSupremacy.insertColons": false, // 是否插入冒号

      "stylusSupremacy.insertSemicolons": false, // 是否插入分好

      "stylusSupremacy.insertBraces": false, // 是否插入大括号

      "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行

      "stylusSupremacy.insertNewLineAroundBlocks": false,

      "[javascript]": {

        "editor.defaultFormatter": "vscode.typescript-language-features"

      },

      "window.zoomLevel": 0, // 两个选择器中是否换行

      /** Easy Sass 插件 **/

      "easysass.formats": [{

        "format": "expanded", // 没有缩进的、扩展的css代码

        "extension": ".css"

      }],

      "easysass.targetDir": "./css/" // 自定义css输出文件路径

    }

    覆盖后的代码如下:

    覆盖完后保存并退出,重新打开vscode,在你自己写的代码里按Ctrl+S保存时即可保存并自动格式化。

    展开全文
  • VSCode自动保存代码 首先需要安装ESLint、Prettier - Code formatter、Vetur插件。 在设置里搜索template找到 Vetur › Format › Default Formatter: HTML,修改选项值(下图) 然后点击(上图)右上角切换...
    • 首先需要安装ESLint、Prettier - Code formatter、Vetur插件。
    • 在设置里搜索template找到 Vetur › Format › Default Formatter: HTML,修改选项值(下图)

    在这里插入图片描述

    • 然后点击(上图)右上角切换settings.json。设置如下(下图)。

    在这里插入图片描述

    {
    	"vetur.format.defaultFormatter.html": "js-beautify-html",
    	"vetur.format.defaultFormatterOptions": {
    		"js-beautify-html": {
    			"wrap_attributes": "auto"
    		},
    		"prettyhtml": {
    			"printWidth": 100,
    			"singleQuote": false,
    			"wrapAttributes": false,
    			"sortAttributes": false,
    		}
    	},
        "vetur.format.options.tabSize": 4,
        "prettier.tabWidth": 4,
        "[vue]": {
            "editor.defaultFormatter": "octref.vetur"
        },
    	"[javascript]": {
            "editor.defaultFormatter": "esbenp.prettier-vscode"
    	},
        "editor.formatOnSave": true,
        "editor.detectIndentation": false
    }
    
    
    • !!!重点:如果保存依然没有反应,或者想自己选择插件进行格式化,可以把(上图)标红两段代码删掉,然后在需要格式化的任意一个页面Shift+Alt+F。(注意:如果删除了vue的代码需要在vue页面,删除javascript的代码需要在js页面),然后会弹出(下图),点击配置,选择想设置的插件就行了, 我这里vue文件选的vetur,js文件用的prettier。

    在这里插入图片描述

    展开全文
  • 一、首先安装插件:Prettier-Code formatter 二、然后在代码区右键选择:Format Document 三、会弹出一个框,选择formate code 四、在文件-》首选项-》设置, 选择text editor-》formatting,然后在formate on save...
  • 最近vscode出现了保存时自动加分号的问题(配置并不是如此),出现这样的问题多半是因为 route 这个插件更新造成的,应做以下配置: 方法一1.在项目中的 .vscode文件夹下创建formatter.json文件(该文件是用来配置JS-...
  • vscode 保存时自动格式化遇到的坑

    千次阅读 2020-10-14 21:22:26
    问题:当项目使用eslint,按ctrl+s保存的时候自动格式化成不符合eslint的格式,导致项目不能运行。 ①安装eslint插件 ② 文件=>首选项=>设置=>点击打开设置(json) ③复制以下代码到settings.json ...
  • vsCode保存代码时自动格式化

    千次阅读 2020-12-21 17:13:58
    // 更改vue的js格式 // "vetur.format.defaultFormatter.js": "vscode-typescript", // 保存时自动格式化 "editor.formatOnSave": true, "vetur.format.defaultFormatterOptions": { "js-beautify-...
  • vsCode保存时代码自动格式化

    万次阅读 2019-07-08 20:34:47
    第一步,打开vsCode,查找Settings,路径为File—>Preferences—>Settings ... 第三步,在settings.json中,加入**“editor.formatOnSave”: true"**。...以上三步完成了vsCode保存时代码自动格式化。 ...
  • vscode如何设置自动保存时自动格式化代码

    万次阅读 多人点赞 2020-02-24 19:12:37
    也可以设置 当我们 保存页面的时候自动格式化代码: 1)文件 ------.>【首选项】---------->【设置】; 2)搜索emmet.include; 3)在settings.json下的【工作区设置】中添加以下语句: "editor.formatOnType...
  • 1.安装eslint 插件 2. 进入 vscode setting.json 里面 1.添加 代码,完成 "editor.codeActionsOnSave": { "source.fixAll": true },
  • "vscode-typescript", "vetur.format.defaultFormatter.html": "js-beautify-html", "eslint.validate": [ "javascript", // 用eslint的规则检测js文件 { "language": "vue", // 检测vue文件 "autoFix": true // 为...
  • 插件Prettier-Code formatter 支持格式的代码类型 JavaScript–TypeScript–Flow–JSX–JSON。...设置保存时格式化 1)勾选保存时格式化 2)设置默认格式化方式 【在代码页面右键】 【回见】 ...
  • 方案一: 将设置-文本编辑器-正在格式化-format on save取消勾选 方案二:安装了 JS-CS-HTML Formatter这个插件的原因,那么解决办法就是禁用或者卸载这个插件,
  • 打开设置,输入emmet.include 找到 “editor.formatOnSave”: false,,将其值改为true即可
  • VScode 保存代码自动格式化

    万次阅读 2019-05-24 13:19:33
    首先在vscode商店下载ESLint 接下来就是进行将下面的代码配置到 .vscode 中 { "eslint.autoFixOnSave": true, "eslint.validate": [ { "language": "vue", "autoFix": true }, {...
  • 1.安装ESLint插件 2.在设置--用户设置--setting.json中添加如下配置: { "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { ... "autoFix": tru...
  • 一、实现vs code中代码格式化快捷键:【Shift】+【Alt】+F 二、实现保存时自动代码格式化: 1)文件 ------.>【首选项】---------->...//回车自动格式化 "editor.formatOnType": true, //保存时自动...
  • 1、打开vscdoe中的设置 2、在搜索框中输入Format On Save 3、把这个勾打上就可以保存自动格式化
  • 新版本VSCode保存自动格式化Eslint操作 1. 安装Eslint插件-在扩展处搜索下载 2. 配置自动保存 打开 首选项, 打开首选项的方式常用vscode的应该也知道windows和mac的位置稍有不同, 都是顶部菜单第一个里边的, ...
  • vscode保存文件自动格式化,下面更改方法: 打开配置文件setting.json 添加: "editor.codeActionsOnSave": { "source.fixAll.eslint": false },
  • vscode 取消保存时自动格式化

    万次阅读 2018-08-29 11:06:39
    在应用商店中找到JS-CSS-HTML Formatter 禁用掉就会不会出现保存时 自动格式化
  • vsCode每次保存自动格式化代码

    千次阅读 2019-09-17 10:06:12
    vsCode每次保存自动格式化代码 在settings.json里面添加: // #每次保存的时候自动格式化 "editor.formatOnSave": true,
  • editor.formatOnSave 上图片 一个图片胜过千言万语:在设置中搜索editor.formatOnSave之后勾线成对号就行了 每次保存文档都会自动格式化
  • 发现很多人,说着个问题,描述不明白,各种脚本,乱七八糟。都是新人,你整一堆脚本,新人有几个看得懂, 直接上图, 第一步,点左下角齿轮 第二部,点设置 第三步,输入formatOnSave 搜索 ...
  • vscode prettier保存代码时自动格式化

    千次阅读 2020-10-22 17:22:11
    输入prettier,找到对应的插件,下载 点击设置 在设置中,按照下图操作 在页面代码处,右键,选择"Format Document",然后选择prettier,保存页面,页面代码自动格式化
  • 综合了一下别人的 终于有一个能用的 因为找的其他的 都是保存了不生效 或者只格式化了html的部分 插件: ESlint Prettier Code formatter vetur { //----------------------------------------- // 工作界面的设置...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,897
精华内容 2,758
关键字:

vscode保存时自动格式化