vscode使用eslint及prettier配合解决代码格式问题

这篇具有很好参考价值的文章主要介绍了vscode使用eslint及prettier配合解决代码格式问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、esLint

esLint是提供一个插件化的javascript代码检测工具。

esLint 配置文件遵循 commonJS 的导出规则,所导出的对象是 eslint 的配置对象。

module.exports = {
  // 表示当前目录即为根目录, eslint 规则将被限制到该目录下
  root: true,
  // env 表示启用 eslint 检测的环境
  env: {
    // 在 node 环境下启动 eslint 检测
    node: true
  },
    // eslint 中基础配置需要继承的配置
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
 // 解析器
  parserOptions: {
    parser: 'babel-eslint'
  },
// 需要修改的启用规则及其各自的错误级别
/**
 *  错误级别分为三种:
 *  "off" 或 0 --- 关闭规则
 *  "warn" 或 1 --- 开启规则,使用警告级别的错误:warn(不会导致程序退出)
 *  "error" 或 2 --- 开启规则,使用错误级别的错误:error(当被触发的时候,程序会退出)
 */
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

二、eslint和prettier配合解决代码格式问题

1、打开vscode 在插件选项中找到对应插件进行安装即可。

vscode 设置前端代码格式美化,1024程序员节

vscode 设置前端代码格式美化,1024程序员节

2、新建一个.prettierrc文件

vscode 设置前端代码格式美化,1024程序员节

在该文件下,写入一下代码

{
    // 不尾随分号 即 写完一句js代码,后面不加分号
    "semi": false,
    // 使用单引号
    "singleQuote": true,
    // 多行逗号分割的语法中,最后一行不加逗号
    "trailingComma": "none"
}

3、设置vscode保存代码时,让代码符合eslint标准

vscode 设置前端代码格式美化,1024程序员节

4、修改vscode中tab对应的空格数

对于vscode而言,默认一个tab等于4个空格,而eslint希望一个tab为两个空格。

vscode 设置前端代码格式美化,1024程序员节

5、如果vscode使用了多个代码格式化工具,需要将prettier设置为默认

在任意一个文件中,右键

vscode 设置前端代码格式美化,1024程序员节

vscode 设置前端代码格式美化,1024程序员节

6、eslint和prettier代码冲突问题解决

eslint要求方法名和后面的小括号之间有个空格,但是保存时,prettier会自动将这个空格删除,因此造成冲突。

只需在.eslintrc.js文件中添加一条规则即可

vscode 设置前端代码格式美化,1024程序员节文章来源地址https://www.toymoban.com/news/detail-784554.html

到了这里,关于vscode使用eslint及prettier配合解决代码格式问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Delete `␍`eslint(prettier/prettier) in vscode 的解决方案

    从 Github 仓库拉取代码,使用 vscode 打开,页面报错,每一行都爆红 (如下图) 由于历史原因,windows下和linux下的文本文件的换行符不一致。 Windows在换行的时候,使用了换行符 CRLF 而Mac和Linux系统,仅仅使用了换行符 LF 老版本的Mac系统使用的是回车符 CR 本人的电脑是 windo

    2024年02月07日
    浏览(43)
  • vscode中使用eslint+prettier的配置

    eslint+prettier+vscode自动保存用起来感觉非常爽快。 一般来说,安装eslint+prettier插件,然后使用相关脚手架配套的eslint+prettier,无法自动格式代码,每次都需要执行格式化命令。这里贴出保存自动格式化代码的setting.json。 如果不使用脚手架自带的eslint+prettier配置,可以参考我之

    2024年02月10日
    浏览(38)
  • vite-admin框架搭建,ESLint + Prettier 语法检测和代码格式化

    开发工具: vs code node: 20.10.0 npm: 10.2.3 UI框架: Element-plus gitee地址: 搭建一个新的vite项目 搭建完成执行命令后如图所示 安装完后项目目录为 1.1 安装插件 1.2 初始化ESLint 安装后生成 .eslintrc.cjs 文件, 配置如下: 2.1 安装插件 2.2 配置Prettier 根目录下创建.prettierrc.cjs文件 .prett

    2024年02月02日
    浏览(44)
  • 第二章 React项目配置ESlint和Prettier实现自动格式化代码以及统一代码风格

    欢迎加入本专栏!本专栏将引领您快速上手React,让我们一起放弃放弃的念头,开始学习之旅吧!我们将从搭建React项目开始,逐步深入讲解最核心的hooks,以及React路由、请求、组件封装以及UI(Ant Design)框架的使用。让我们一起掌握React,开启前端开发的全新篇章! 需要准

    2024年02月03日
    浏览(45)
  • Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化

    我在这里直接是通过vite提供的默认模板来创建一个vue3 + ts的项目。这里可以cmd,然后npm -v来查看版本。 这样一个vue3 + ts的项目就创建好了,使用vscode打开该项目,然后执行 yarn 安装依赖 依赖安装完成后,执行   yarn dev  启动项目就可以在浏览器中正常访问了。   初始化

    2024年01月24日
    浏览(63)
  • vsCode配置Eslint+Prettier结合使用详细配置步骤,规范化开发

            eslint它规范的是代码偏向语法层面上的风格 。本篇文章以一个基本的vue项目,来说明eslint+prettier+husky配置项目代码规范,为了更好的描述本文,我恢复了vscode的默认设置(即未安装eslint,prettier等插件,setting中也没有相关配置) 1、新建vue3.0脚手架项目 2、项目安装

    2023年04月17日
    浏览(34)
  • 如何解决ESLint和prettier冲突问题

    注意:这个冲突问题一般是指在代码编辑器中出现的问题,这里使用的是vscode。 在前端开发中,很多人使用 prettier 作为代码格式化工具,用 ESLint 控制代码风格,以及检查错误。 但是在同时使用 ESLint 和 prettier 的时候,由于代码规则不一样就会发生冲突,发生冲突的原因是

    2024年02月07日
    浏览(26)
  • eslint和prettier格式化冲突

    下载插件 ESLint 和 Prettier ESLint 进入setting.json中 setting.json中配置 打开 .eslintrc.js 文件,在 rules 里面加上 \\\"space-before-function-paren\\\": 0

    2024年02月10日
    浏览(34)
  • 【VScode】ESLint :warning Delete `CR` prettier/prettier

    作用     检查 Javascript 编程时的语法错误。 新建或修改文件时报错 原因      Windows系统 ,clone的代码会自动把换行符 LF 转为回车符 CRLF ,这时本地的代码都是回车符。可在prettier.config.js中查看到 检查配置(ESLint中是否支持JavaScript/vue语言) (1)在VScode中,使用Ctr + 打开

    2024年02月02日
    浏览(42)
  • VSCode设置eslint自动缩进和自动格式化代码

    (1)点击左下角齿轮图标并选择设置: (2)在文本编辑器中找到 settings.json settings.json的初始内容:

    2023年04月08日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包