如何使用js格式化json、css和scss

使用JavaScript格式化JSON

要使用JavaScript格式化JSON，可以使用内置的JSON.stringify()函数。该函数将JavaScript对象转换为JSON字符串，并且可以传递参数来使输出的JSON字符串更具可读性。以下是使用JSON.stringify()函数格式化JSON的示例代码：

let myObj = {
  name: "John",
  age: 30,
  city: "New York"
};

let myJSON = JSON.stringify(myObj, null, 2);

console.log(myJSON);

在这个例子中，myObj是一个JavaScript对象，它有三个属性：name，age和city。JSON.stringify()函数将myObj转换为JSON字符串，并将其赋值给变量myJSON。第二个参数null表示没有过滤器函数。第三个参数2表示将JSON字符串格式化为具有两个空格缩进的格式。最后，使用console.log()函数将格式化的JSON字符串输出到控制台。

输出：

{
  "name": "John",
  "age": 30,
  "city": "New York"
}

使用格式化参数可能会在生成的JSON字符串中包含空格和换行符，这可能会使生成的JSON字符串变得更大。如果希望在网络传输中使用JSON字符串，最好不要使用格式化参数。

使用JavaScript格式化CSS或SCSS

要使用JavaScript格式化CSS或SCSS，可以使用现有的第三方库，如cssbeautify或prettier。以下是使用cssbeautify库格式化CSS和SCSS的示例代码：

首先，需要安装cssbeautify库，可以使用npm或yarn命令：

npm install cssbeautify --save

然后，在JavaScript文件中导入该库并使用其API来格式化CSS或SCSS。以下是一个例子：

const cssbeautify = require('cssbeautify');

const css = `
body {
  background: #f5f5f5;
  font-family: Arial, sans-serif;
}
`;

const formattedCSS = cssbeautify(css, {
  indent: '  ', // 两个空格缩进
  openbrace: 'end-of-line', // 换行放大括号
  autosemicolon: true // 自动添加分号
});

console.log(formattedCSS);

在这个例子中，使用require函数将cssbeautify库导入到JavaScript文件中。然后，定义一个CSS字符串，并将其传递给cssbeautify函数。在cssbeautify函数的第二个参数中，使用indent属性定义缩进为两个空格，使用openbrace属性将放大括号设置为换行符，并使用autosemicolon属性自动添加分号。最后，使用console.log()函数将格式化的CSS字符串输出到控制台。

输出：

body {
  background: #f5f5f5;
  font-family: Arial, sans-serif;
}

cssbeautify库不仅可以格式化CSS，还可以格式化SCSS和LESS等预处理器语言。只需将SCSS字符串传递给cssbeautify函数即可。