vscode中eslint插件的配置（prettier配置无效）

用vue-cli构建vue项目，会有个eslint代码检测的安装

可vscode自带代码格式化是prettier格式（右键有格式化文件或alt+shift+f）

这时候要在vscode上装一个eslint插件

装完后在文件-----》首选项-------》设置里找到settings.json（快捷键忘了）

eslint配置如下，（配置的·具体详情还有待研究，我也是网上copy的，不过亲测可用）。保存配置后每次写.vue文件只要control+s保存，就可以把代码格式改成符合eslint标准

"eslint.autoFixOnSave": true,
// 专门写Vue的eslint配置
"eslint.validate": [
 "javascript",
 "javascriptreact",
 { "language": "html", "autoFix": true },
 { "language": "vue", "autoFix": true }
]

-------------------------------------------------------------分割线---------------------------------------------------------------

在写vue的时候很多人会选择prettier+eslint来规范代码格式

这时候有些人就很奇怪，我明明在setting.json里配置了prettier的格式化规范，怎么就不生效呢

其实用vscode做vue开发的时候都会安装一个Vetur的插件来对.vue格式的文件进行处理，Vetur自带了格式化，规范就是使用prettier

如果你有装prettier插件，并且在设置或setting.json里配置了prettier的话是无效的

如上图，在设置勾选后配置后就会在setting.json里生成对应配置代码，不过由于Vetur的存在，此时的prettier其实并未起作用（可能是优先级问题吧，我也不清楚）

正确配置看下图和Vetur官方文档

官网链接

所以说有两种方法配置，一种是在根目录下写一个.prettier文件，文件里的内容可以参考网上其它文章。另一种就是如上图所示，在setting.json里配置

------------------------------------------------------------------------------分割线---------------------------------------------------

eslint也是能格式化的，只是有局限性，所以要prettier来配合

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • VScode格式化ESlint方法(最全最好用方法)

    VScode格式化ESlint方法(最全最好用方法)

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景: 近来研究前端,然后一直在百度上找VScode格式化(ESlint)的插件,结果找了半天都不靠谱.目前没有一个可以格式化html.css.符合ESlint的js.vue的插件,所以自己东拼西凑加实践找到解决方法. 解决方案: 1.安装插件 1)ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~

  • vscode下vue项目中eslint的使用方法

    前言 在vscode的vue项目中,关于代码检查和格式化,遇到各种各样的问题,比如: 不清楚安装的拓展的功能,导致安装了重复功能的拓展 右键格式化文档的时候,不是按eslint的规则来格式化,导致需要我再次手动调整 保存时不能自动修复代码 以下通过自己的实践,进行了相应配置,目前可以实现: 仅安装2个推荐的拓展 右键格式化文档按照eslint规则,不会产生错误 保存时自动修复代码 vscode 拓展安装 eslint 拓展 该拓展本身不带任何插件,当前项目要使用该拓展,需要安装相应的npm包(全

  • Vue-cli Eslint在vscode里代码自动格式化的方法

    编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等. 添加对.vue文件的格式化支持 这里我们添加对 .vue 文件的格式化支持. 1. 安装 Vetur 插件 2. 在 VS Code 的设置中添加如下规则: { "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier&qu

  • vue+eslint+vscode配置教程

    vue+eslint+vscode配置教程

    package.json文件所需要的eslint包 "scripts": { "lint": "eslint --ext .js,.vue src", }, "devDependencies": { "babel-eslint": "^8.2.1", "eslint": "^4.15.0", "eslint-config-airbnb-b

  • VSCode使用之Vue工程配置eslint

    首先确保VS Code 安装了 Vetur 和 Eslint 插件. 然后使用了vue-cli提供的简单webpack模板,这样创建的工程默认没有添加ESLint. vue init webpack-simple test-vscode 配置过程 全局安装最新的eslint npm i -g eslint@latest 运行 eslint --init 会安装以下依赖 eslint-config-standard@latest eslint-plugin-import@>=2.2.0 eslin

  • vue cli3.0 引入eslint 结合vscode使用

    它的目标是提供一个插件化的javascript代码检测工具.官网地址 最近一个项目里,最开始使用 cli3.0 搭建的时候没有默认选用 eslint ,导致现在有的人使用其他编辑器,就会出现格式错乱的情况.所以引入 eslint 做代码检测 第一步 (安装) npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev 引入关于 eslint 的一些依赖 当你的 pac

  • VSCode中ESLint插件修复以及配置教程

    目录 vscode+eslint插件+配置教程 如果不好用 排查1: 如果出现后面回车符问题 排查2: 保存时好了但是一瞬间代码又回来了 排查3: 右下角是否开启eslint服务 排查4: 如果保存还是变回去了 排查5: ESLint不生效 排查6: 如果都用心走了一遍, 还不行 总结 vscode+eslint插件+配置教程 1.打开项目, 必须让Vscode左侧工作区根目录是项目文件夹, 确保根目录下(第一级)有eslintrc.js / package.json中有eslint相关配置.

  • vscode中eslint插件的配置（prettier配置无效）

    用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个eslint插件 装完后在文件----->首选项------->设置里找到settings.json(快捷键忘了) eslint配置如下,(配置的·具体详情还有待研究,我也是网上copy的,不过亲测可用).保存配置后每次写.vue文件只要control+s保存,就可以把代码格式改成符合eslint标准 &

  • 在VsCode中搭建Go开发环境的配置教程

    现在Go1.14都已经发布好些日子了,之前发的Go环境搭建教程早已过时,只是因为时间问题一直没来得及更新 这次怀着愧疚的心情,在凌晨四点时,将这教程进行一个更新 注意:本教程最大的好处是不需要梯子. 直接在墙内可进行一切操作,文章写给纯小白的,部分Linux常识解释的过多,熟悉的人请略过 Go的安装 安装基本还是之前的老样子,不过现在的安装早已省事不少,不再需要配置环境变量.直接去官网,下载了安装包后直接安装即可 在Go中文网进行Go最新版安装包的下载(或者复制网址浏览器打开https://st

  • vscode中launch.json和task.json配置教程(重要参数详解)

    目录 背景 Tasks.json launch.json 总结 背景 开始前先说一下搞这个的原因,最早的时候看不懂json,后面在工作中有大量接触json的缘故,看这个json其实也就是一个key-value对,因为之前自己的编译器总是debug不了,就很难受,花了一个上午的时间深入研究了一下这个vscode的配置文件信息,也算是记录一下. Tasks.json 按编译逻辑来说,先讲tasks.json 先贴图: "label": 对应launch.json中的 "preLa

  • Vue项目vscode 安装eslint插件的方法(代码自动修复)

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package.json查看,也可以查看工程下是否有.eslintrc.js和.eslintignore查看到eslint是否开启. 当我们编写不符合eslint规范的代码时,启动项目会报错,比如 这个时候可以安装vscode eslint插件,就可以自动检测不符合规范的代码.打开vscode左侧扩展面板,搜索es

  • 解决vscode中golang插件依赖安装失败问题

    vscode中安装ms-vscode.go插件后可以开启对go语言的支持,ms-vscode.go插件需要依赖一些工具,安装完成后提示 gocode go-outline go-symbols guru gorename gocode-gomod goreturns golint Installing github.com/ramya-rao-a/go-outline FAILED 由于网络原因,一些依赖工具无法正常安装,需要进行手动安装. 以下为手动安装的工具的步骤: 在%GOPATH%\sr

  • Eclipse中php插件安装及Xdebug配置的使用详解

    Eclipse中php插件安装及Xdebug配置的使用详解

    由于在android开发团队,又迷上了android自动化测试,所有一直使用Eclipse做为开发工具.以前使用Zend Studio 9.0.1做为PHP的开发工具,现在放弃使用Zend Studio 9.0.1了,有了Eclipse的PHP开发插件,所以计划以后统一使用Eclipse开发.这样方便.在Eclipse上安装PHP插件非常简单,可以到http://sourceforge.net/project/showfiles.php?group_id=57621  下载插件.把下载到的插件解

  • 详解如何在VS2019和VScode中配置C++调用python接口

    详解如何在VS2019和VScode中配置C++调用python接口

    why 看到这个标题有些人说了,为什么好好的C++你非要调用python?人家明明是两种语言呀! 但是在实际应用中,有时候会用到C/C++调用python来更简单地去完成一些功能,不然人家python为什么有一个文件夹叫include,里边全是.h文件呢? VScode中配置环境 首先是在VScode中为C++调用python接口配置环境,这里假设你已经配置好了c++编程环境! 1.配置step1 用快捷键Ctrl+Shift+X打开Extensions 商店,输入python,install:

  • 详解使用vscode+es6写nodejs服务端调试配置

    前端的小伙伴们在babel等的加持下,已经可以愉快的使用es6来写代码了. 然后对于服务端的nodejs就有点坑爹了,虽然原生支持了es6,但是只是部分支持,一些不支持的特性(比如module)使用了就会报错,所以如果想使用完整的es6来写服务端nodejs,我们还是离不开babel. 下面介绍一下在vscode中使用es6写nodejs的配置方法. 1.首先在根目录下建立.babelrc文件,写入babel配置,我的配置如下,记得npm安装babel及你需要的presets或者plugin.

  • vscode分享代码插件Polacode介绍

    1.打开VSCode中的插件,搜索Polacode 2.点击install进行安装 3.安装完成后,先打开你要分享的代码,然后按Ctrl + Shift + p 打开命令面板,然后再输入框中输入Polacode,就可以打开使用了 4.点击相机按钮,就另存为图片了,长这样 总结 到此这篇关于vscode分享代码插件Polacode的文章就介绍到这了,更多相关vscode分享代码插件Polacode内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

随机推荐