admin管理员组文章数量:1602282
新建项目
新建 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/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/gostarcraft/eslint_html
本文标签: eslintVSCodehtmlbeautify
版权声明:本文标题:vscode eslint beautify 格式化 html 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1726471492a1072138.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论