代码改变世界

js 前端使用 prettier格式化scss

2022-03-28 11:07  muamaker  阅读(845)  评论(0)  编辑  收藏  举报

一、使用 prettier 插件，在纯前端 格式一些代码

参加 https://prettier.io/docs/en/browser.html

 

二、这里以 scss 为例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		    <script type="text/javascript" src="https://unpkg.com/prettier@2.6.1/standalone.js"></script>
		    <script type="text/javascript"  src="https://unpkg.com/prettier@2.6.1/parser-postcss.js"></script>

	</head>
	<body>
	</body>
	<script type="text/javascript">
		    let result = prettier.format(`.frame {
		    height: 100%;
		    position: relative;
		    background-color: #ffffff;
		    iframe {
		        width: 100%;
		        height: 100%;
		    }
		    &:before {
		        content: 'Preview';
		        position: absolute;
		        left: 50%;
		        top: 50%;
		        font-size: 3vw;
		        transform: translate(-50%, -50%);
		        opacity: 0.15;
		        color: #999;
		    }
		    &.fullScreen {
		        position: fixed;
		        top: 0;
		        left: 0;
		        width: 100%;
		        height: 100%;
		        z-index: 100;
		    }
		    &:hover {
		        .el-icon-full-screen {
		            display: block;
		        }
		    }
		}`,{parser:"scss", 'plugins': window.prettierPlugins});
		
		console.log(result);
	</script>
</html>