登录  /  注册
首页 > 开发工具 > VSCode > 正文

浅析在vscode中怎么用eslint和prettier

青灯夜游
发布: 2022-01-04 18:56:19
转载
2645人浏览过

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

浅析在vscode中怎么用eslint和prettier

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入门教程》】

1.png

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']
登录后复制
  • 属性值数组中第一个元素设置

2.png

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

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

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

3.png

注意: 此时项目就会按照默认设置,以及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

4.png

同时还需要安装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"]
登录后复制

实际上做了下面的事情

5.png

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

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
}
登录后复制

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

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

6.png

7.png

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

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
};
登录后复制

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

8.png

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

rules: {
//…
  'prettier/prettier': 'error'
}
登录后复制

此时效果如下

9.png

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

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

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

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号