使用Prettier插件根据eslint的规则去格式化代码

使用Prettier插件根据eslint的规则去格式化代码

你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。

第一步:需要先安装Prettier

npm i prettier -g

第二步:项目根目录下创建.prettierrc配置文件:

在这里插入图片描述
注意 :实际使用中不要保留注释;不然会报错

如何改变文本的样式

{
	// 超过最大值换行
    "printWidth": 200,
    // 让prettier使用eslint的代码格式进行校验
    "eslintIntegration": true,
    // 让prettier使用stylelint的代码格式进行校验
    "stylelintIntegration": true,
    // tab键宽度,默认为2
    "tabWidth": 2,
    // 行末加分号
    "semi": false,
    // 用单引号代替双引号
    "singleQuote": true,
    // 对象&数组是否追加空格
    // e.g. false: {foo:bar}
    // true: { foo: bar }
    "bracketSpacing": true,
    // 箭头函数参数括号 默认avoid 可选 avoid | always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    "arrowParens": "avoid"
}

vscode安装插件prettier - Code formatter

在这里插入图片描述

第四步:在setting.json文件中配置默认格式化代码插件

在这里插入图片描述
配置默认格式化代码插件;不同文件配置不同的插件;被使用的插件要启用,否则无法正常格式化
在这里插入图片描述

第五步:在代码页面使用快捷键:alt + shift + f

文档链接:
http://note.youdao.com/noteshare?id=02bf27a285c26a55038ecaa57b8622fe&sub=B03B91CF999042B4A6360A012A2EB401

猜你喜欢

转载自blog.csdn.net/weixin_39085822/article/details/105286501
今日推荐