站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

浅析在vscode中怎么用eslint和prettier

时间:2022-01-05 [网络编程]作者:访客 浏览:7 次

在vscode中怎么用eslint和prettier?下面本篇文章给大家介绍一下vscode中的eslint用法、eslint 与 prettier 结合使用,希望对大家有所帮助!

浅析在vscode中怎么用eslint和prettier  2

1. vscode中eslint的使用

1)首先在vscode中安装eslint,然后在vscode的settings.json添加如下代码

"editor.formatOnSave": true, // 保存是格式化
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // 按照eslint规则格式化
},
"eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序

2)必须在项目中安装eslint(或者全局安装)

这个是vscode中eslint插件的要求:【推荐学习:《vscode入门教程》】

浅析在vscode中怎么用eslint和prettier  2

3)在根目录中添加 .eslintrc.js 文件,添加如下代码

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["eslint:recommended"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {}
};

4)rules 里面的设置

quotes: [
   'error',
   'single'
],

semi: ['error', 'never']
  • 属性值数组中第一个元素设置

浅析在vscode中怎么用eslint和prettier  2

  • 属性值数组中第二个元素设置

eslint.bootcss.com/docs/rules/ 找到对应属性点击进入,然后找到options

  • eslint:recommended 默认规则的都有标记

浅析在vscode中怎么用eslint和prettier  2

注意: 此时项目就会按照默认设置,以及rules里面的规则进行提示,保存时也会根据eslint的规则就行格式化。

2. eslint 与 prettier 结合使用

(注:eslint与prettier的结合视情况而定,不是非得要与prettier一起使用)

1)首先在vscode中安装prettier插件,然后在vscode中的 settings.json 里面添加下面的代码

"editor.defaultFormatter": "esbenp.prettier-vscode",

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

2)在项目中安装prettier

浅析在vscode中怎么用eslint和prettier  2

同时还需要安装eslint-plugin-prettiereslint-config-prettier,这两个插件的目的就是为了使eslint可以按照prettier的规则进行提示(注意这两个插件的版本号问题,最新的 eslint-plugin-prettier 的4.0版本使用时有问题)

"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.3.1"

然后在 .eslintrc.js里面的extends加上 plugin:prettier/recommended

extends: ["eslint:recommended", "plugin:prettier/recommended"]

实际上做了下面的事情

浅析在vscode中怎么用eslint和prettier  2

然后就可以在根目录下添加.prettierrc.js 文件,eslint将按照里面的规则进行提示,同时保存的时候也会按照里面的规则进行格式化

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
}

3. 在vue项目中使用prettier规则

1)首先在创建的时候选择eslint + prettier的设置

浅析在vscode中怎么用eslint和prettier  2

浅析在vscode中怎么用eslint和prettier  2

2)在根目录下创建 .prettierrc.js,并添加规则

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
};

默认情况下,当代码中的格式不正确时,会是warn警告

浅析在vscode中怎么用eslint和prettier  2

如果需要把它变成error,需要在.eslintrc.js中添加如下代码

rules: {
//…
  'prettier/prettier': 'error'
}

此时效果如下

浅析在vscode中怎么用eslint和prettier  2

注: 在修改完一些配置后,vscode可以不会马上生效,此时可以关闭项目,重新打开试试

更多关于VSCode的相关知识,请访问:vscode教程!!

以上就是浅析在vscode中怎么用eslint和prettier的详细内容,更多请关注站长家园其它相关文章!

本文标签:

转载请注明来源:浅析在vscode中怎么用eslint和prettier

本文永久链接地址:https://www.adminjie.com/post/7244.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • pc端是啥

      pc端是啥

      pc端是指电脑端;pc是personalcomputer的缩写,表示个人计算机,由硬件系统和软件系统组成,是一种能独立运行,完成特定功能的设备。本文操作环境:...

    • 网页和网站有什么区别

      网页和网站有什么区别

      区别:1、网站由域名、服务器、空间等构成,而网页是由HTML、JS等代码构成;2、网站功能齐全,包含了注册功能、登录功能、业务功能,而网页一般实现几个简单功能;...

    • oracle中or的用法是什么

      oracle中or的用法是什么

      在oracle中,or是一个逻辑运算符,是“或”的意思,用于筛选指定的条件,当or运算符前后的条件有一个为真时,返回的结果为true,如果or前后的条件全部为假...

    • flash是啥

      flash是啥

      flash是存储芯片的一种,又称闪存,通过特定的程序可以修改里面的数据;FLASH在电子以及半导体领域内往往表示FlashMemory的意思,即平时所说的“闪...

    • 只有硬件没有安装软件的计算机通常称之为什么

      只有硬件没有安装软件的计算机通常称之为什么

      只有硬件没有安装软件的计算机通常称之为裸机,什么也无法处理;普通用户所面对的一般都不是裸机,而是已经配置若干软件之后的计算机系统。在所有软件中,操作系统是最基本...

    热门文章