[Day 17] 阿嬷都看得懂的程序码编辑器与开源软件是什麽
阿嬷都看得懂的程序码编辑器与开源软件是什麽
我们终於写出了第一支 .html 与 .css 档案了，有没有觉得 HTML 标签与 CSS 样式的种类越来越多，所以想不起来的字、和拼错的字也越来越多？天啊，我是阿嬷，从来没想到要背这麽多东西，而且有些单字还很长啊！不是说工程师都很懒吗？这样我还要勤奋记单字，还要勤奋拼字检查耶！
既然工程师这麽懒，有没有什麽好用的道具，可以帮我们不用背出完整的单字，就可以写出完整的程序码呢？你看，像我们用手机打英文单字的时候，手机不是都会自动预测和校正吗？甚至，如果在我们的程序写得不太对劲，例如少了分号啦、括弧缺一边的时候，可以像拼字检查那样，提醒我们一下，不是很好吗？哆啦A梦，有没有什麽好用的道具...
还真的有！我们有些程序，可以在我们打下几个字母的时候，就自动替我们找出或补完想打出的单字。这些程序，我们就叫作「程序码编辑器」。
市面上有非常多程序码编辑器，目前比较流行的，大概是 VSCode 和 Sublime 两种。
什麽？我有选择障碍，不要给我选项，告诉我要用哪种啊啊啊！
那就使用 VSCode 吧！因为 VSCode 是开源软件。
开源？什麽是开源？开源节流吗？
任何我们使用的软件，就像所有网站一样，背後都是用程序码写成的。不过，许多时候，因为软件是某些公司的商品，所以我们不会看到软件背後的程序码怎麽写；这种程序码不公布的软件，叫作「专有软件」。当我们发现专有软件的问题，因为我们也不知道後面程序码长怎样，所以也只好联络软件公司，让软件企业内部员工进行修正。同理，当我们觉得专有软件功能不够完善，也只好回报软件公司，并且等待软件後续更新。
相反地，许多软件的创作者，会将所有程序码公布出来，并且允许所有人加入修改。无论是任何人发现软件的问题，或者想要让软件的功能变得更强大，都可以加入修改这个软件的行列。这种软件，我们就叫作「开源软件」。我们可以想像，这些软件的问题修复与功能扩充，应该会比专有软件来得快很多。毕竟，全世界的工程师，都可以加入开源软件的修正与撰写。
VSCode 这款开源软件，有非常多强者帮我们编写了好用的功能，也有相当好的中文化支援。可以点这边下载。
安装完 VSCode 之後，我们点开红圈处的扩充功能 (Extensions)：
并且在右侧的搜寻列中，打入 "Chinese" 以後，选择「繁体中文」，
选择 install，安装完以後重开 VS code，就可以把介面中文化罗！
当我们选择「档案」，再选择「新增档案」以後，会看到 VSCode 很贴心地请我们
选择一个语言，
我们就输入 html 吧！我们也可以看到，VSCode 支援非常多种程序语言。在告诉 VSCode 我们现在想写的语言之後，它就会作出很多超棒的协助喔！
还记得我们昨天提到的 DOCTYPE 标签吗？
<!DOCTYPE html>
那就让我们输入半形惊叹号 "!" 看看吧！
!()[https://i.imgur.com/q9P4Wqs.png]
结果跑出了两个选项！按键盘的上下箭头可以选择，我们先选第一个，按下 Enter 或 tab 都可以喔。
!()[https://i.imgur.com/swr9SPu.png]
太神奇啦！瞬间跑出 12 行 HTML 标签！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
title>Document</title>
</head>
<body>
</body>
</html>
有没有发现这个结构很眼熟？没错，这不就是我们昨天讲过， .html 档案的通用结构吗？VSCode 知道我们写 .html 档案大概就是这个格式，所以就自动帮我们完成了。只需要输入 1 个半形惊叹号，就可以完成 12 行，是有没有这麽懒！
接着，让我们来加几个标签看看。以前打一个 p 标签，要打超多符号的。现在只要输入 p，再按下 tab... 耶，p 标签完成罗！想加入 class 是 productInfo 的 p 标签怎麽办呢？还记得 class 的 CSS 选择器是什麽吗？加个半形句点就行了。因此，我们输入 p.productInfo，再按下 tab... 耶，跑出了
<p class="productInfo"></p>
那如果单纯输入类别名称，例如 .gavagai，再按下 tab，会跑出什麽呢？这就交给各位阿嬷自己去实验罗！
那让我们再试试看 .css 档是不是也这麽有用。同样开新档案，选择 CSS 这个语言。我们先作个 gavagai 这个类别的样式看看。
.gavagai{
}
这时候会发现，我们的 .gavagai 被划上黄色底线了！
怎麽会!?是我写错什麽吗？别担心，让我们把滑鼠移上去看看：
它说「不要使用空的样式组合」。喔喔，原来是提醒我们，这个类别还没放上样式，这样这个类别会变得没什麽意义。是的，程序码编辑器就是这麽贴心，连我们写了没必要的程序码，都会提醒我们。那就让我们继续往下写吧！
写 CSS 样式的时候，会有很多很长的属性对吧。例如 background-image 就超长的啊！那各位阿嬷觉得，会想怎麽偷懒缩写呢？试试看 bgi 吧！真的有选项跑出来耶！我们再按下 tab... 当啦，
.gavagai{
background-image: url();
}
不只连属性打好了，连值都知道我们会需要 url() 中间放位址，所以也帮我们把 url() 写好了罗！是不是天堂！
VSCode 的自动完成功能非常完善，就先交给各位阿嬷自己享受游玩。接下来，每次都要写完 .html 档後储存，再点开看网页长怎样，是不是很烦躁呢？尽管我们还有段时间才会接触後端，不过这个烦躁感，会随着我们越往後端靠近，越加严重。
没关系，VSCode 有个非常有名的扩充功能，叫作 "Live server"，就是为了解决这个问题而产生。先让我们按照上面介绍的方式，找到这个扩充功能并且安装。然後，选择「档案」，再选择「开启资料夹」，找到存放 .html 档的资料夹後，点选「选择资料夹」。点开 .html 档後，就可以对程序码区域按右键，点选 "Open with Live Server"，使用浏览器开启我们写好的网页罗！最棒的是，无论我们修改任何档案，我们的网页都会立刻同步改变！是不是超方便呢？
>>: Day17 - 如何用shioaji搭配Ta-Lib计算技术指标: 应用篇
【Day06】生命周期 Lifecycle（Class Component）
React 元件拥有从产生、渲染 到被移除解放资源的各个阶段 称之为生命周期（Lifecycle）。...
30. 铁人赛心得
铁人赛心得 这是第二次参加铁人赛，第一次主题是javasript的入门学习，第二次是比较有一点难度的...
第四天：在 Linux 上安装 Gradle
接下来要跟大家谈谈如何在三大主流作业系统上安装 Gradle，读者可以依据自己习惯使用的作业系统跟着...
DAY28 - EDM切版
还有一种类型的切版，是EDM切版， EDM切版是什麽呢？ 指的就是信里面看到的版面，像是下面这个就是...
DAY4 - 认识Nx
在上一篇，建立起一个Angular+Nestjs的Nx专案，那麽这一篇就要来好好介绍什麽是Nx。 安...