vscode使用Prettier Code插件的详细教程

 更新时间:2021年09月07日 11:27:07   作者:Famigilstimo  
这篇文章主要介绍了vscode使用Prettier Code插件的详细教程,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

为什么要使用prettier?

在大公司,前端开发的代码可能会有自己的代码规范,如果快速生成自己的代码规范呢?使用Prettier是一个比较好的选择!

如何安装Prettier Code插件?

在这里插入图片描述

在侧边栏最后一个选项,在搜索栏中搜索Prettier Code,然后安装即可。

项目中如何配置

在你新建的项目中,新建两个配置文件即可,一个是.prettierignore文件,这个文件的作用类似于.gitignore文件,为了忽略哪些文件;另外一个是.prettierrc.js文件,这个文件是配置你的代码校验规则。

.prettierignore配置如下

**/*.md
**/*.svg
**/*.ejs
**/*.html
package.json
.umi
.umi-production
.umi-test

.prettierrc.js配置如下

module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 2 个空格缩进
    tabWidth: 2,
    // 不使用缩进符,而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号,而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'all',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数,只有一个参数的时候,也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'auto',
};

这样所有配置就完成了,等你每次编写代码后,点击右键选择格式化文档即可

到此这篇关于vscode使用Prettier Code插件的详细教程的文章就介绍到这了,更多相关vscode使用Prettier Code内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js处理层级数据结构的方法小结

    js处理层级数据结构的方法小结

    本文主要介绍了js处理层级数据结构的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript 中的运算符和表达式介绍

    JavaScript 中的运算符和表达式介绍

    这篇文章主要介绍了JavaScript 中的运算符和表达式介绍,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • javascript实现div浮动在网页最顶上并带关闭按钮效果实例

    javascript实现div浮动在网页最顶上并带关闭按钮效果实例

    我们有时会看到有些网站最顶部一直会跟着我们滚动而滚动了,这种方法其实很简单,下面我来给大推荐一个javascript实现div浮动在网页最顶上并带关闭按钮效果
    2013-08-08
  • 原生js实现水平方向无缝滚动

    原生js实现水平方向无缝滚动

    这篇文章主要为大家详细介绍了原生js实现水平方向无缝滚动的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JavaScript数组去重实现方法小结

    JavaScript数组去重实现方法小结

    这篇文章主要介绍了JavaScript数组去重实现方法,结合实例形式总结分析了JavaScript数组去重ES3、ES5及ES6常见实现方法与操作注意事项,需要的朋友可以参考下
    2020-01-01
  • 用javascript实现的支持lrc歌词的播放器

    用javascript实现的支持lrc歌词的播放器

    用javascript实现的支持lrc歌词的播放器...
    2007-05-05
  • javascript new 需不需要继续使用

    javascript new 需不需要继续使用

    在javascript你不需要使用new Object(),你该使用{}就可以了。
    2009-07-07
  • setInterval和setTimeout停止的方法

    setInterval和setTimeout停止的方法

    要想知道它们是怎么停止的,首先我们要了解它们的运行机制和原理,下面是具体的介绍。
    2011-01-01
  • JS对大量数据进行多重过滤的方法

    JS对大量数据进行多重过滤的方法

    今天在工作中遇到一个问题,当前端通过Ajax从后端取得了大量的数据,需要根据一些条件过滤,但是发现写的过滤方法有问题,后来仔细的查找问题,通过网上的资料终于解决了这个问题,现在将解决的过程以及解决方法分享给大家,有需要的朋友们可以参考借鉴。
    2016-11-11
  • JS中箭头函数与this的写法和理解

    JS中箭头函数与this的写法和理解

    这篇文章主要给大家介绍了关于JS中箭头函数与this的写法和理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01

最新评论