用作JavaScript开辟人士,那几个必不可缺的VS Code插件你都用过呢?

2018/09/03 · 基本功技艺 ·
VS code,
插件

初藳出处: Michael
Wanyoike   译文出处:赐紫樱珠城官方网址   

后天,Visual Studio
Code无疑是最盛行的轻量级代码编辑器。它确实从别的代码编辑器那借鉴了大多,最要紧是从Sublime和Atom这里。可是它的打响至关心重视假若来自能提供越来越好的属性和天下太平的变现。此外,它还提供了如代码智能提示等开垦者特别要求的功力。而那些成效,曾经只在像Eclipse或许Visual
Studio 2017这么的完全集成开垦条件(IDEs)中才有。

VS Code的雄强无疑来自于它的插件商场。多亏掉开源社区,VS
Code现在大致对具备的编制程序语言、框架和开拓本领都有支撑。提供这种支撑的点子是三种的,首要包涵了为一定技巧提供代码片段、语法高亮、Emmet以致智能提暗暗提示义。

MAIN结构

滚动视差?CSS 不言而谕

2018/08/10 · CSS · 3
评论 ·
滚动视差

正文我: 伯乐在线 –
chokcoco
。未经作者许可,禁绝转发!
招待到场伯乐在线 专辑作者。

VS Code插件的品类

在本文,小编重点介绍特地针对JavaScript开采者的VS
Code插件。有好些个满意此标准的VS
Code插件,当然作者不会都作介绍。相反,作者会注重介绍那多少个早就极其风行何况对JavaScript开荒者来讲必不可少的VS
Code插件。为简易起见,小编把它们分为10类。

在此面恐怕有你早就明白况且正在选拔的插件,但也很有希望有局地是您传闻过但还未使用过的,我也可望因此本文能为你简要的牵线一下那么些插件。

////

何为滚动视差

视差滚动(Parallax
Scrolling)是指让多层背景以不一样的速度移动,产生立体的移位功用,带来特别可观的视觉体验。
作为网页设计的热销方向,更加多的网址使用了那项技巧。

图片 1

日常来讲,滚动视差在前面一个要求帮忙 Javascript 才能落到实处。当然,其实 CSS
在达成滚动视差效果方面,也不无不俗的力量。上面就让我们来见识有限:

1. 代码片段插件

当您首先次安装VS
Code时,它会顺便一些JavaScript和TypeScript的代码片段。在您起来上手今世JavaScript在此之前,你将索要某个附加的代码片段来增加援救您神速地编写ES6/ES7代码:

  • VS Code JavaScript(ES6)
    snippets:当前最盛行的,原来就有当先120万的下载量。那个插件为JavaScript、TypeScript、HTML、React和Vue提供了ES6的语法接济。
  • JavaScript Snippet
    Pack:提供了有效的JavaScript代码片段群集。(这几个链接打不开了)
  • Atom JavaScript Snippet:移植自Atom的JavaScript插件。
  • JavaScript
    Snippets:提供了ES6代码片段的汇聚。它包蕴对Mocha、Jasmine等别的BBD(Behavior-Driven
    Development)测量试验框架的支撑。

<%@ Master Language=”C#” AutoEventWireup=”true”
CodeFile=”Main.master.cs” Inherits=”Main” %>

认识 background-attachment

background-attachment 算是贰个比较生僻的品质,基本上平日写作业样式都用不到那特个性。不过它本身很有趣。

background-attachment:借使钦赐了 background-image ,那么 background-attachment 决定背景是在视口中定位的要么随着包涵它的区块滚动的。

仅有从概念上稍加难以理解,随上面多少个 德姆o
通晓下 background-attachment 到底是什么看头:

2. 语法高亮插件

VS
Code自带很好的JavaScript代码语法高亮。你能够经过安装大旨退换这个颜色。然则,假设您想要越来越高水准的可读性,就得设置语法高亮的插件了。这里有风流倜傥部分:

  • JavaScript Atom Grammar:它用Atom编辑器里的JavaScript语法高亮替换VS
    Code原本的。
  • Babel JavaScript:帮助ES201X、React、FlowType以致GraphQL的语法高亮。
  • DotENV:支持.env文件语法高亮,在您选择Node时会极其常有效。

<!DOCTYPE html>
<html xmlns=”;
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title></title>
<asp:ContentPlaceHolder ID=”head” runat=”server”>
</asp:ContentPlaceHolder>
<link href=”css/bootstrap.min.css” rel=”stylesheet” />
<!–[if lt IE 9]>
<script src=”js/html5shiv.js”></script>
<script src=”js/respond.min.js”></script>
<![endif]–>
<style>
body { padding-top: 70px;line-height:1.75em;font-family:”Helvetica
Neue”, Helvetica, “Microsoft Yahei”, Hiragino Sans GB, WenQuanYi Micro
Hei, sans-serif; }
</style>
</head>
<body>
<nav class=”navbar navbar-inverse navbar-fixed-top”
role=”navigation”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse”
data-target=”#bs-example-navbar-collapse-1″>
<span class=”btn btn-default btn-sm”>全部</span>
<span class=”sr-only”>导航</span>
</button>
<a class=”navbar-brand” href=”/”>***民众留言板</a>
</div>
<!– Collect the nav links, forms, and other content for toggling
–>
<div class=”collapse navbar-collapse”
id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav”>
<li class=”active”> <a
href=”Login.aspx”>首页</a></li>
<li class=”active”> <a
href=”Message.aspx”>留言</a></li>
<li class=”active”> <a
href=”ViewMessage.aspx”>历史与改造</a></li>
</ul>

background-attachment: scroll

scroll 此主要字表示背景相对于成分自身固定, 并非随着它的内容滚动。

3. 代码检查测试插件

以细小的沉闷高效编写JavaScript代码,必要叁个代码检测(linter)工具。它强制团队有着成员依照特定的代码规范。ESLint是最受应接的,它接济广大代码风格,包括Standard、Google和Airbnb的JavaScript代码标准。这里是最盛行的VS
Code代码检查插件:

  • ESLint:这一个插件把ESLint集成到VS
    Code中。它是最风靡的代码检查测量试验插件,已有当先670万下载量。它的平整在.eslintrc.json里配置。
  • JSHint:基于JSHint的代码检验插件。在等级次序跟目录下选取.jshintrc文本作为其配备。
  • JavaScript Standard
    Style:零配置和暴虐准绳的代码检验,强制行使StandardJS准绳。

风姿浪漫经您想查看对各样代码检查测验优缺点的归咎,能够来拜谒大家对代码检查测试工具的比较。

</div>
<!– /.navbar-collapse –>
</div>
</nav>
<div class=”container” id=”Content”>
<asp:ContentPlaceHolder ID=”Contents” runat=”server”>
</asp:ContentPlaceHolder>

background-attachment: local

local 此关键字表示背景相对于成分的内容定位。借使贰个要素具备滚动机制,背景将会趁着成分的剧情滚动,
并且背景的绘图区域和恒久区域是争持于可滚动的区域并非包含他们的边框。

4. Node插件

每一个JavaScript项目都亟待最少三个Node
package,除非您是这种喜欢以不方便的不二法门专门的学业的人。这里有局地VS
Code插件,能帮你更易于的管理Node模块。

  • npm:用package.json来校验安装的npm包,确定保证卫安全装包的版本精确,对缺少package.json文本的包依旧未安装的包给出高亮提示。
  • Node.js Modules
    AMDliSense:提供JavaScript和TypeScript导入声明时的机关补全。源码:vscode-node-module-intellisense。

图片 2

  • Path
    速龙liSense:它实际上与Node没有关联,可是你早晚须求对当麻芋果件的智能提示,那一个插件会自行补全文件名。
  • Node exec:允许你用Node推行业前文件大概选中的代码。
  • View Node Package:利用此插件可神速查看Node包源码,令你直接在VS
    Code中张开Node包的代码库或文书档案。
  • Search
    node_modules:通常node_modules文本夹不在暗许的检索范围内,这几个插件允许你追寻它。源码:vscode-search-node-modules。

图片 3

  • Import Cost:展现导入的包的大大小小。源码:import-cost。

图片 4

</div>
<div id=”footer” class=” container panel”>
<div class=”panel-body” style=”color: #ddd;”>
<p class=”text-muted”>(C)
****科学技术有限集团,新手指南</p>

background-attachment: fixed

fixed 此主要字表示背景相对于视口固定。尽管三个成分具备滚动机制,背景也不会趁着成分的剧情滚动。

留心一下 scroll 与
fixed,二个是周旋成分本身固定,八个是相对视口固定,有一点点相仿 position 定位的 absolute 和 fixed

能够感受下 3 种不一致取值的分裂功能:
CodePen Demo — bg-attachment
Demo

5. 代码格式化插件

突发性,你开掘本人会对在此以前写过的风骨不太杰出的代码做格式整理。为了节省时间,你能够安装以下任何的VS
Code插件,来相当慢地格式化和重构现成代码:

  • Beatufy:一个jsBeautifier的插件,支持JavaScript、JSON、CSS和HTML。可通过.jsbeautifyrc文件自定义。它是最盛行的格式化学工业具,方今有230万的下载量。
  • Prettier Code
    Formatter:利用Prettier的援助JavaScript、TypeScript和CSS的插件,这段时间有逾越150万的下载量。
  • JS
    Refactor:提供非常多种构JavaScript代码的实用方法和操作,举个例子抽出变量和办法,把现成代码转为选拔箭头函数和模板字符串的相当形式,导出函数等。
  • JavaScript
    Booster:意气风发款了不起的代码重构工具。拥有需求代码操作,譬喻把var转为const或者let,去除多余的else言语,归总注解和初步化。其灵感大批量源点WebStorm的错误的指导。源码:vscode-javascript-booster。

图片 5

</div>
</div>
<script src=”JS/jquery-1.11.0.min.js”></script>
<script src=”JS/bootstrap.min.js”></script>
<asp:ContentPlaceHolder ID=”Scripts” runat=”server”>
</asp:ContentPlaceHolder>
<!–[if lte IE 8]>
<script type=”text/javascript”
src=”js/bootstrap-ie.js”></script>
<script type=”text/javascript”>
if
(confirm(“您近日采取的浏览器版本过低,存在着深重的狐狸尾巴,提出你升官您的浏览器。\n您是还是不是须求明白进级浏览器相关的内容?”))
{
this.location = “ErrorPage/ie.html”;
} else {
alert(“您今后采用的是极其方式。\n也许不恐怕精确展现页面,大家刚烈建议您升官您的浏览器。\n晋级请按F5”);
}
</script>
<![endif]–>
</body>
</html>

使用 background-attachment: fixed 达成滚动视差

先是,我们运用 background-attachment: fixed 来落成滚动视差。fixed 此首要字表示背景相对于视口固定。即使二个因素具有滚动机制,背景也不会趁着成分的原委滚动。

此处的关键在于,固然多个要素具有滚动机制,背景也不会趁机成分的内容滚动。也正是说,背景图从少年老成开首就早就被固化死在带头所在的职位。

大家接收,图像和文字混合排布的不二等秘书诀,达成滚动视差,HTML
结构如下,.g-word 表示内容结构,.g-img 表示背景图片结构:

<section class="g-word">Header</section>
<section class="g-img">IMG1</section>
<section class="g-word">Content1</section>
<section class="g-img">IMG2</section>
<section class="g-word">Content2</section>
<section class="g-img">IMG3</section>
<section class="g-word">Footer</section>

关键 CSS:

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

意义如下:

图片 6

CodePen Demo —
https://codepen.io/Chokcoco/pen/JBaQoY

啊?有一点无缘无故,为何会是那样呢?恐怕过三人会和本人相似,第三遍接触那特脾气对如此的效果与利益以为懵逼。

作者们把上边 background-attachment: fixed 注释掉,或许改为 background-attachment: local,再看看效果:

图片 7

CodePen Demo —
bg-attachment:local

本次,图片平常跟随滚动条滚动了,按常理,这种成效才切合我们大脑的想想。

而滚动视差效果,就是不按常理出牌的三个效率,入眼来了:

当页面滚动到图片应该现身之处,被设置了 background-attachment: fixed 的图纸并不会继续跟随页面包车型客车轮转而跟随左右移动,而是绝对于视口固定死了。

好,大家再来试一下,借使把具备 .g-word 内容区块都去掉,只剩余全数装置了 background-attachment: fixed 的背景图区块,会是怎样啊?

HTML 代码如下:

<section class="g-img">IMG1</section>
<section class="g-img">IMG2</section>
<section class="g-img">IMG3</section>

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

效果如下:

图片 8

CodePen Demo

组成那张
GIF,相信能对 background-attachment: fixed 有个越来越深入的认知,移动的唯有视口,而背景图是直接牢固死的。

综上,就是 CSS
使用 background-attachment: fixed 实现滚动视差的风流倜傥种办法,也是相持来讲相比比较简单于的风华正茂种。当然,background-attachment: fixed 本身的功用并不止只是能有用来兑现滚动视差效果,合理施用,还足以兑现其余过多风趣的效应,这里差不离再列一个:

 

6. 浏览器插件

独有您是在用JavaScript写调节台程序,否则你多半会在浏览器中推行你的JavaScript代码。那意味着,你会频仍地刷新浏览器以观测历次你更新代码的功能。这里有大器晚成对工具,能大幅地降低你付出时的这种重新流程,并非每一遍都手动刷新浏览器:

  • Debugger for
    Chrome:在编辑器中打断点,令你轻便地在Chrome里调节和测验JavaScript。源码:vscode-chrome-debug。

图片 9

  • Live
    Server:开启本地开垦时服务器,为静态和动态页面提供实时刷新作用。源码:vscode-chrome-debugvscode-live-server。

图片 10

  • Preview on Web Server:提供web服务器和实时预览功用。
  • PHP Server:对测量检验只可以在顾客端运转的JavaScript代码很有用。
  • Rest Client:相较于用浏览器依旧几个CURubiconL程序来测验你的REST
    API端点,你能够设置那几个工具,直接在编辑器里互相性地发HTTP央浼。

登入分界面

background-attachment: fixed 实现图片点击水纹效果

采用图片绝对视口固定,能够有过多美不可言的意义,举个例子上边这么些,来源于那篇文章CSS
Water Wave
(水波效果):

图片 11

CodePen Demo — bg-attachment:fixed
Wave

动用图片相对视口固定的天性达成点击的水纹效果。

地点那些效应有一点毛病,图片在拓展容器变大的进度中发生了显眼的颠荡。当然,效果仍是可以够的,background-attachment 还会有超多相映生辉的成效能够发现。

7. 框架类插件

对于绝大好些个等级次序,你会使用方便的框架去打造你的代码,以减小费用时间。VS
Code通过插件对好多主流框架都做了匡助。可是,仍然有局地一定框架未有得到完全的支撑。上边是一些提供了强硬功效的VS
Code插件。

  • Angular 6:提供Angular 6的代码片段,协理TypeScript、HTML、Angular
    Material ng奥迪Q7x、KoleosxJS和Flex
    Layout。近日有220多万的下载量和1柒拾四个Angular代码片段。
  • Angular v5
    snippets:提供指向性TypeScript、HighlanderxJS、HTML和Docker文件的代码片段。近些日子有270多万的下载量。
  • React Native/React/Redux snippets for
    es6/es7:提供对这一个框架的ES6/ES7语法的代码片段。
  • React Native Tools:为React
    Native框架提供代码智能提醒、命令行工具和调节和测量试验特性。
  • Vetur:为Vue框架提供语法高亮、代码片段、Emmet、代码检查评定、智能提示和调节和测量试验帮衬。它包涵很好的揭穿在GitBook上的文书档案。
  • Ember:为Ember提供了命令行辅助和智能提示。安装完后,全体ember cli的通令可向来在VS
    Code自身的一声令下行列表中央银行使。
  • Cordava
    Tools:帮助Cordava插件和Ionic框架,提供依附Cordova的花色的智能提示、调节和测量检验已经别的特色的支撑。
  • jQuery Code
    Snippets:提供了超越1三二十个jQuery的代码片段,使用jq前缀来激活。

图片 12

使用 transform: translate3d 已毕滚动视差

闲话休说,上边介绍其它后生可畏种接纳 CSS 达成的轮转视差效果,利用的是 CSS 3D。

规律就是:

  1. 咱俩给容器设置上 transform-style: preserve-3d 和 perspective: xpx,那么处于那些容器的子成分就将放在3D空间中,
  2. 再给子成分设置不相同的 transform: translateZ(),当时,差异因素在
    3D Z轴方向间距荧屏(大家的双目)的相距也就不相通
  3. 滚动滚动条,由于子成分设置了不一样的 transform: translateZ(),那么他们滚动的内外间隔 translateY 相对显示屏(大家的眸子),也是不近似的,那就高达了滚动视差的效能。

关于 transform-style: preserve-3d 以及 perspective 本文不做过多篇幅实行,默许读者都具备精晓,还不是特意通晓的,能够先领会下
CSS 3D。

主导代码表示正是:

<div class="g-container">
    <div class="section-one">translateZ(-1)</div>
    <div class="section-two">translateZ(-2)</div>
    <div class="section-three">translateZ(-3)</div>
</div>

html {
    height: 100%;
    overflow: hidden;
}

body {
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.g-container {
    height: 150%;

    .section-one {
        transform: translateZ(-1px);
    }
    .section-two {
        transform: translateZ(-2px);
    }
    .section-three {
        transform: translateZ(-3px);
    }
}

小结就是父成分设置 transform-style: preserve-3d 和 perspective: 1px,子成分设置分化的 transform: translateZ,滚动滚动条,效果如下:

图片 13

CodePen Demo — CSS 3D parallax

很分明,当滚动滚动条时,分裂子成分的移动程度从视觉上看是不相通的,也就达成了所谓的滚动视差效果。

8. 测量试验类插件

测量检验是软件开拓中的关键环节,对于生产阶段的档期的顺序来讲更是如此。你能够因而翻阅大家的指南-JavaScript测量检验:单元测验vs 功用测验 vs
集成测试-来赢得对JavaScript测量试验的二个概况。这里有点目的性测验的VS
Code插件:

  • Mocha
    sidebar:利用Mocha库为品种提供单元测量检验。这些框架帮你直接在代码里跑测量试验,把错误新闻以装饰器格局显得出来。
  • ES Mocha
    Snippets:提供ES6语法的Mocha代码片段。那个插件的关键在于利用箭头函数,尽或许减少花括号的行使,保持代码的紧紧。可通过安装允许使用分号。
  • Jasmine Code Snippets:针对贾斯敏测验框架的代码片段。
  • Protractor
    Snippets:针对Protractor端到端测量检验框架的代码片段。扶持JavaScript和TypeScript。
  • Node
    TDD:为Node和JavaScript项目提供测量检验驱动开拓的扶助。能在源码的翻新后,立刻触发自动化测量检验的营造。源码:node-tdd

//

滚动视差文字阴影/虚影效果

那便是说,运用 translate3d
的视差效果,又能有局地怎样风趣的功效啊?下边那么些滚动视差文字阴影/虚影效果很有意思:

图片 14

CodePen Demo — CSS translate3d
Parallax

自然,通过调治参数(perspective: ?px 以及 transform: translateZ(-?px);),还是能有此外很有趣的机能出现:

图片 15

CodePen Demo — CSS translate3d Parallax
2

是否很有影视开片的商家 LOGO
的特效的认为 图片 16 。

师父领进门,修行在个人,怎么构建越来越好更有趣的法力依然须要花时间研讨和雕刻,这里自个儿唯有是投石问路,希望能见到越多Nice 的功效。

9. 其余棒棒的插件

本人把下一群VS
Code的插件归为”厉害的”(awesome)那意气风发类,因为那一个描述下不为例。

  • Quokka.js:非常了得的调节和测验工具,为JavaScript提供了飞快营造原型的演习场,况且附带有很好的文书档案。
  • Paste as
    JSON:连忙地将JSON数据转为JavaScript代码。源码:quick-type。

图片 17

  • Code
    Metrics:那是另二个不胜棒的插件,总结JavaScript和TypeScript代码中复杂度。源码:codemetrics。

图片 18

图片 19

图片 20

 

最后

多谢耐烦读完。越来越多精粹 CSS 手艺随笔汇总在自家的 Github —
iCSS ,持续更新,迎接点个 star
订阅收藏。

好了,本文到此甘休,希望对你有帮带 🙂

比方还宛怎样疑难还是建议,能够多多交流,原创文章,文笔有限,德薄才疏,文中若有不正之处,万望告知。

打赏援救笔者写出越来越多好小说,谢谢!

打赏小编

10. 插件包

将来我们过来了最后生龙活虎类,小编想让您精晓,VS
Code市镇有有贰个插件包的归类。本质上,它们是相关联的片段VS
Code插件的汇聚,打成二个包,方便安装。这里有个别较好的:

  • Nodejs Extension Pack:那一个包里有ESLint、npm、JavaScript(ES6)
    snippets、Search node_modules、NPM IntelliSense和Path
    IntelliSense。
  • VS Code for Node.js – Development Pack:这一个蕴藏NPM
    AMDliSense、ESLint、Debugger for Chrome、Code
    Metrics、Docker和Import Cost。
  • Vue.js Extension
    Pack:一些Vue和JavaScript插件的汇聚。近些日子它包蕴10个VS
    Code的插件,有黄金年代对从前大家从不涉及的,例如auto-rename-tag和auto-close-tag。
  • Ionic Extesion
    Pack:那么些包里有针对Ionic、Angular、PRADOxJS、Cordova和HTML开辟的插件。
  • SpreadJS纯前端表格组件:可放置你系统的在线Excel,成效布局与
    Excel 高度相符,完全合作 Excel 的 450 种公式和 92 种图表。

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/Main.master”
AutoEventWireup=”true” CodeFile=”Login.aspx.cs” Inherits=”_Default”
%>

打赏帮助自身写出越多好小说,多谢!

任选生机勃勃种支付方式

图片 21
图片 22

1 赞 4 收藏 3
评论

总结

VS
Code具有大量的高水平插件,那让它在JavaScript开荒者群体海南中国广播公司受招待。写JavaScript代码,再未有比后日更便于了。

像ESLint那样的插件,匡助你制止代码中的习感到常错误;Debugger for
Chrome,扶植你更易于地调节和测量检验代码;带有智能提醒的Node.js插件帮忙您不错引用模块;像Live
Server和REST
client这样的可用工具,令你在完毕专门的学问时减弱了对外表工具的借助;再举例SpreadJS纯前端表格控件,让在线Excel放置您的运用。全部这个工具,都相当大地加速了您的迭代流程。

自家愿意这一个列表让您接触到新的VS Code插件,对您的做事流程有赞助。

1 赞 收藏
评论

图片 23

<asp:Content ID=”Content1″ ContentPlaceHolderID=”head”
Runat=”Server”>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”Contents”
Runat=”Server”>
<div class=”col-md-5 col-md-offset-5″>
<div class=”panel panel-primary”>
<div class=”panel-heading”>
<h3 class=”panel-title”>
登录</h3>
</div>
<div class=”panel-body”>
<form class=”form-horizontal” role=”form”>
<div class=”form-group”>
<label for=”inputEmail3″ class=”col-md-2 control-label”>
账户</label>
<div class=”col-sm-10″>
<input name=”LoginName” type=”text” class=”form-control”
id=”inputEmail3″ placeholder=”用户名”/>
</div>
</div>
<div class=”form-group”>
<label for=”inputPassword3″ class=”col-md-2 control-label”>
密码</label>
<div class=”col-sm-10″>
<input name=”Password” type=”password” class=”form-control”
id=”inputPassword3″ placeholder=”密码”/>
</div>
</div>
<div class=”form-group”>
<div class=”col-md-offset-2 col-sm-10″>
<div class=”checkbox”>
<label>
<input type=”checkbox”/>
纪事密码
</label>

至于小编:chokcoco

图片 24

经不住光阴似箭,逃但是此间少年。

个人主页 ·
小编的稿子 ·
63 ·
   

图片 23

发表评论

电子邮件地址不会被公开。 必填项已用*标注