vscode eslint beautify 格式化 html

最新推荐文章于 2024-08-09 07:58:41 发布

Sven在流浪

最新推荐文章于 2024-08-09 07:58:41 发布

阅读量4.3k

点赞数 1

分类专栏：格式输出 html eslint 文章标签： html javascript node.js es6

本文链接：https://blog.csdn.net/q9090960bnb3/article/details/104207522

版权

格式输出同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

eslint

1 篇文章 0 订阅

订阅专栏

新建项目

新建 eslint_html 项目，键入’!'生成代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

安装 Beautify 插件

eslint 不支持格式化html 标签内容，默认格式化工具不支持自定义配置，使用该插件自定义格式化。

在项目中新建 .jsbeautifyrc文件，内容如下

{
  "indent_size": 2,
  "indent_char": " "
}

该配置让 html 标签以 2空格缩进

eslint 配置

准备好node 环境安装 eslint和 vscode eslint 插件

初始化npm配置

npm init

回车，按默认配置执行

eslint 初始化

# eslint --init
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? None of these
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Google: https://github.com/google/eslint-config-google
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-google@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-config-google@latest eslint@>=5.16.0
? Would you like to install them now with npm? Yes
Installing eslint-config-google@latest, eslint@>=5.16.0
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN eslint_html@1.0.0 No description
npm WARN eslint_html@1.0.0 No repository field.

+ eslint@6.8.0
+ eslint-config-google@0.14.0
added 124 packages from 84 contributors in 6.591s

2 packages are looking for funding
  run `npm fund` for details

Successfully created .eslintrc.js file in xxxxxxx/xxxx

我采用google标准，也可以采用其他标准

写入测试代码

html 中键入以下内容

<script>
  let a = 1
  console.log("a:", a)
</script>

安装eslint html 插件

npm install eslint-plugin-html --dev-save

该步骤很必要，否则不会检测html文件
.eslintrc.js 文件加入如下配置

'plugins': ['html'],

vscode 配置文件

{
    "[html]": {
    	// 使用beautify格式化 html 文件
        "editor.defaultFormatter": "HookyQR.beautify",
        // 保存html时会使用eslint 格式化 script标签中的内容
        "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
        }
    }
}

完成校验，此时html 中文件应该会出现错误提示

如图
在这里插入图片描述

按ctrl + s 保存会自动按 es6 标准修复

<script>
  const a = 1;
  console.log('a:', a);
</script>

自定义rule

在.eslintrc.js 键入自定义规则定义标准
如

	'rules': {
    semi: ['error', 'never']
  },

添加js 不以分号结尾

结束

ctrl+s 和 ctrl+shift+f 格式化及修复，如下

<script>
  const a = 1
  console.log('a:', a)
</script>

该项目以放入 github，可直接作为模板使用

https://github.com/gostarcraft/eslint_html

Sven在流浪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录