mirror of
https://github.com/qianguyihao/Web.git
synced 2024-11-01 13:34:46 +08:00
add(VS Code配置): 突出显示成对的括号
This commit is contained in:
qianguyihao
parent
e6ef3c9113
commit
1482ea8b94
@ -579,7 +579,18 @@ VS Code 会根据你所打开的文件来决定该使用空格还是制表。也
|
||||
|
||||
打开设置项，搜索`files.trimTrailingWhitespace`，将选项勾选，即可在保存文件时自动删除行尾的空格。
|
||||
|
||||
#### 17、突出显示成对的括号
|
||||
|
||||
我们可以用不同颜色显示代码中成对的括号，并用连线标注括号范围。简称**彩虹括号**。
|
||||
|
||||
最早是通过`Bracket Pair Colorizer 2`插件支持的，但是这个插件已经被废弃了，，因为 VS Code 已经内置了该功能。我们可以通过 VS Code的如下配置项，达到效果：
|
||||
|
||||
```json
|
||||
{
|
||||
"editor.bracketPairColorization.enabled": true,
|
||||
"editor.guides.bracketPairs":"active"
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
> 接下来，我们来讲一些更高级的操作。
|
||||
@ -1236,16 +1247,10 @@ ES6 语法智能提示，支持快速输入。
|
||||
|
||||
### 4、代码显示增强插件
|
||||
|
||||
#### Bracket Pair Colorizer 2：突出显示成对的括号【荐】
|
||||
|
||||
`Bracket Pair Colorizer 2`插件：以不同颜色显示成对的括号，并用连线标注括号范围。简称**彩虹括号**。
|
||||
#### highlight-icemode：选中相同的代码时，让高亮显示更加明显
|
||||
|
||||
另外，还有个`Rainbow Brackets`插件，也可以突出显示成对的括号。
|
||||
|
||||
|
||||
#### highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】
|
||||
|
||||
VSCode 自带的高亮显示，实在是不够显眼。用插件支持一下吧。
|
||||
VSCode 自带的高亮显示，实在是不够显眼。可以用插件支持一下。
|
||||
|
||||
所用了这个插件之后，VS Code 自带的高亮就可以关掉了：
|
||||
|
||||
|
||||
@ -237,7 +237,6 @@ Brendan Eich 这位天才只用了10天就设计出了 JS，但这门语言当
|
||||
|
||||
十八世纪英国文学家约翰逊博士有一句名言说得好：“这个作品是好的，也是原创的，它的优秀之处并非原创，它的原创之处并不优秀。”（It is both good and original; but the part that is good is not original, and the part that is original is not good.）
|
||||
|
||||
|
||||
后来，随着ES6语法的不断改进，JS语言越来越优秀。ECMA 和 ECMAScript 赋予了 JavaScript 新的能力和活力。
|
||||
|
||||
### JavaScript 的发展：蒸蒸日上
|
||||
@ -342,7 +341,6 @@ JavaScript 基础分为三个部分：
|
||||
2、遵守ECMAScript 标准。
|
||||
3、单线程。
|
||||
|
||||
|
||||
## 参考链接
|
||||
|
||||
- [编程语言的一些概念](https://jameszhan.github.io/2014/09/25/programming-languages-concepts.html)
|
||||
@ -353,7 +351,6 @@ JavaScript 基础分为三个部分：
|
||||
|
||||
|
||||
|
||||
|
||||
- [汇编语言(转) | Xian Rong](https://xianrong.github.io/2017/11/14/%E6%B1%87%E7%BC%96%E8%AF%AD%E8%A8%80%28%E8%BD%AC%29/)
|
||||
|
||||
## 赞赏作者
|
||||
|
||||
@ -68,7 +68,7 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
|
||||
解释：
|
||||
|
||||
- text 表示纯文本，因为 JavaScript 代码本身就是纯文本。
|
||||
- tyue属性中的text 表示纯文本，因为 JavaScript 代码本身就是纯文本。当然，type属性可以省略，因为 JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
|
||||
|
||||
- 可以将多行 JS 代码写到 `<script>` 标签中。
|
||||
|
||||
@ -91,10 +91,11 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
</html>
|
||||
```
|
||||
|
||||
**分析**：
|
||||
解释：
|
||||
|
||||
- 上面这段代码，依然是放到 body 标签里，可以和内嵌的 JS 代码并列。
|
||||
- 上方代码的 script 标签已经引入了外部 JS 文件，所以这个标签里面，不可以再写 JS 代码。
|
||||
- 方式2和方式3不能混用。
|
||||
|
||||
**总结**：
|
||||
|
||||
@ -106,7 +107,9 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
|
||||
上面的三种方式，有个共同的地方是：JS 代码都是写在 body 标签中的，准确来说，是在页面标签元素（比如 `title` 标签）的后面，在 `</body>`结束标签的前面。
|
||||
|
||||
为什么一般是按这样的顺序来写呢？这是因为：浏览器默认会**从上至下**解析网页（这句话很重要）。当你需要通过 JS 来操作界面上的标签元素时，假如将 JS 代码、`<script>`标签写到`<head>`标签中，或者写在页面标签元素的前面，那么这样的 JS 是无效的，因为标签元素在此时都还没来得及加载，自然无法操作这个元素。
|
||||
为什么一般是按这样的顺序来写呢？这是因为：浏览器默认遵循**HTML文档**的加载顺序，即按照**从上至下**的加载顺序解析网页（这句话很重要）。所以，通常情况下，我们会把JS代码写在 body 内部的末尾。
|
||||
|
||||
然而，当你需要通过 JS 来操作界面上的标签元素时，假如将 JS 代码或者`<script>`标签写到`<head>`标签中，或者写在HTML标签元素的前面，那么这样的 JS 是无效的，因为标签元素在此时都还没来得及加载，自然无法操作这个元素。
|
||||
|
||||
**重点来了：**当你**需要通过 JS 来操作界面上的标签元素**时，如果实在想把 JS 写到`<head>`标签中，那么就必须用 window.onload 将 JS 代码进行包裹。代码格式如下：
|
||||
|
||||
@ -123,13 +126,13 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
|
||||
我们可以根据具体需要来决定，将 window.onload 写在 `<head>`标签中，或者写在`<script>`标签中。
|
||||
|
||||
### `<noscript> ` 标签：浏览器不支持JS脚本时的降级方案
|
||||
### `<noscript>` 标签：浏览器不支持JS脚本时的降级方案
|
||||
|
||||
`<noscript>` 标签是一种HTML标签，用于提供在浏览器禁用JavaScript或无法执行JavaScript脚本时的替代内容。它允许网页开发人员在需要时向用户显示备用内容。这有助于提高网站的可访问性和用户体验。
|
||||
`<noscript>` 标签是一种HTML标签，用于提供在浏览器禁用JavaScript或无法执行JavaScript脚本时的替代内容。它允开发者在需要时向用户显示备用内容。这有助于提高网站的可访问性和用户体验。
|
||||
|
||||
如果有些浏览器不支持 JS 脚本，或者用户禁用了浏览器的JS脚本（如下图），那么，该如何给用户提供一个友好的提示呢？我们可以通过 `<noscript>` 标签作为**降级**的处理方案。
|
||||
|
||||
|
||||
|
||||
|
||||
`<noscript>` 标签的基础语法：
|
||||
|
||||
@ -147,7 +150,7 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
|
||||
## JavaScript 一些简单的语法规则
|
||||
|
||||
学习程序，是有规律可循的，程序会有有相同的部分，这些部分就是一种规定，不能更改，我们称之为：语法。我们先来了解一个简单的语法规则。
|
||||
学习编程语言，是有规律可循的，程序会有相同的部分，这些部分就是一种规定，不能更改，我们称之为：语法。我们先来了解一个简单的语法规则。
|
||||
|
||||
1、JS 对换行、缩进、空格不敏感。每一条语句以分号结尾。
|
||||
|
||||
@ -170,13 +173,17 @@ JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引
|
||||
</script>
|
||||
```
|
||||
|
||||
2、每一条语句末尾要加上**分号**。虽然分号不是必须加的，但如果不写分号，浏览器会自动添加分号，导致消耗一些系统资源和性能，甚至有可能**添加错误**。
|
||||
2、每一条语句末尾建议加上**分号**。
|
||||
|
||||
3、所有的符号，都是英文的。比如**括号**、引号、分号。
|
||||
当存在换行符（line break）时，大多数情况下可以省略分号，JavaScript 会将换行符理解成“隐式”的分号，进而自动添加分号。
|
||||
|
||||
也就是说，分号不是必须加的，如果不写分号，浏览器会在换行符的位置自动添加分号，但是会消耗一些系统资源和性能，甚至有可能**添加错误**，导致一些奇怪的bug。
|
||||
|
||||
3、所有的符号都是英文的，比如括号、引号、分号。
|
||||
|
||||
如果你用的是搜狗拼音，**建议不要用 shift 切换中英文**（可以在搜狗软件里进行设置），不然很容易输入中文的分号；建议用 ctrl+space 切换中英文输入法。
|
||||
|
||||
4、JS 严格区分大小写。
|
||||
4、JS 严格区分大小写。HTML和CSS不区分大小写，但是 JS 严格区分大小写。
|
||||
|
||||
## 前端代码的注释
|
||||
|
||||
@ -269,7 +276,7 @@ VS Code --> 首选项 --> 键盘快捷方式 --> 查找“注释”这两个字
|
||||
|
||||
推荐阅读：
|
||||
|
||||
- 代码审查 review 指南：https://lib.jimmysong.io/eng-practices/review/
|
||||
- 代码审查 review 指南：<https://lib.jimmysong.io/eng-practices/review/>
|
||||
|
||||
## JavaScript 输出语句
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user