天天看点

JavaScript:05 开发者技能与编辑器设置1

作者:学习资源

053 Section Intro

现在你已经熟悉了JavaScript的基础知识,是时候稍微休息一下,看一下一些你也需要发展的其他技能,为了成为一名出色的JavaScript程序员。

因此,在本节中,你将学习,如何真正学会编码,如何作为一个开发者思考,如何调试你的代码,以防你遇到问题以及如何设置你自己的计算机上的专业开发环境。

视频加载中...

054 Section Roadmap

课程提供了视频中出现的代码文件。

https://github.com/jonasschmedtmann/complete-javascript-course

055 Setting up Prettier and VS Code

本讲学习VS Code的配置,通过这些配置,让我们编码自动规范和便捷。

视频加载中...

在代码中要启用严格模式。

JavaScript:05 开发者技能与编辑器设置1

配置VS Code,添加Prettier代码格式化工具。

在VS Code扩展中搜索prettier。

JavaScript:05 开发者技能与编辑器设置1

选中第一个Prettier-Code formatter进行安装。

JavaScript:05 开发者技能与编辑器设置1

在VS Code的Setting中搜索default fomatter项。

JavaScript:05 开发者技能与编辑器设置1

在下拉菜单中选择带有prettier的名字即可。

JavaScript:05 开发者技能与编辑器设置1

在Setting中搜索formatt on save项。

确保此项打开。

JavaScript:05 开发者技能与编辑器设置1

测试验证一下Prettier自动格式化的效果。

JavaScript:05 开发者技能与编辑器设置1

保存当前内容。多行空行自动更新为一行空行。等号两边也自动补了空格。类似这样的格式化处理,在编码过程中都可以看到。

JavaScript:05 开发者技能与编辑器设置1

Prettier会把代码中的单引号更改为双引号。如果不希望改动,也可以通过设置来调整这些变化。

在当前目录下创建文件名称“.prettierrc”,在文件中输入:

{
    "singleQuote": true
}           

保存文件。

再次查看代码文件内的双引号变成单引号。

JavaScript:05 开发者技能与编辑器设置1

Prettier针对箭头函数也可以自动补全。

JavaScript:05 开发者技能与编辑器设置1

保存当前文件。可以看到有哪些变化。单一参数给添加了括号。

JavaScript:05 开发者技能与编辑器设置1

当然,也可以设置不添加括号。

在“.prettierrc”文件中输入:

{
    "singleQuote": true,
  "arrowParens": "avoid"
}           

console.log经常会在代码中使用,如何简化console.log输入呢?

先进入User Snippets页面。

JavaScript:05 开发者技能与编辑器设置1

创建新的全局Snippets文件。

JavaScript:05 开发者技能与编辑器设置1

输入javascript,然后回车。

JavaScript:05 开发者技能与编辑器设置1

修改示例内容。

JavaScript:05 开发者技能与编辑器设置1

在代码页面输入cl,则直接得到console.log();内容。

在console.log()中添加$1,在代码也输入cl,则得到console.log(),光标会停留在括号内。

JavaScript:05 开发者技能与编辑器设置1

056 Installing Node.js and Setting Up a Dev Environment

本将主要学习node.js安装和设置。

视频加载中...

修改代码后,自动重新加载浏览器,如何设置?

在VS Code扩展中安装Live Server。

JavaScript:05 开发者技能与编辑器设置1

在VS Code最底部执行Go Live,弹出浏览器预览。

JavaScript:05 开发者技能与编辑器设置1

在VS Code代码页面使用console.log记录信息输出到控制台。无需手动刷新浏览器页面,自动输出数据。

JavaScript:05 开发者技能与编辑器设置1

还可以通过安装node.js和live server的npm包来实现。

在node.js官方网站上下载安装包。

JavaScript:05 开发者技能与编辑器设置1

node.js是在浏览器之外运行JavaScript的一种工具。

在VS Code的终端窗口查看node.js的版本。

JavaScript:05 开发者技能与编辑器设置1

在VS Code的终端窗口安装live server。

JavaScript:05 开发者技能与编辑器设置1

在VS Code的终端窗口运行live-server。弹出浏览器窗口。

JavaScript:05 开发者技能与编辑器设置1
JavaScript:05 开发者技能与编辑器设置1

057 Learning How to Code

本讲学习如何正确学习编码。

视频加载中...

先看一些导致没有学好的原因。

JavaScript:05 开发者技能与编辑器设置1

1、学习没有明确的目标。

2、只是通过视频学习,复制代码,没有思考这些代码是如何工作的。

3、没有通过做一些代码挑战或者记录笔记来强化学习的内容。

4、没有多练习编码。

5、面对代码的低效和不够简洁,很容易气馁。

6、面对未知的东西,很快失去动力。

7、独自闷头学习,没有交流。

8、完成课程后没有自己独立做些什么。

如何正确的学习编码,需要注意以下这些事情。

JavaScript:05 开发者技能与编辑器设置1

1、学习要明确目标。为了目标,要做出可行的时间计划。

为什么学习编程?为了换更好的工作还是为了改行?

可以想象学习是为了完成一个大项目为目标。

把需要学习的技能都罗列出来,按照顺序一步一步去学习。

2、学习编程,不建议拷贝已有的代码,要弄明白代码的含义。

自己动手去输入所有代码,让代码语法加深印象。

3、多去做一些编码挑战和练习,来加强学习内容。

通过记笔记来学习和复习编程知识。

不要急于完成课程,确保学习内容掌握牢固。

JavaScript:05 开发者技能与编辑器设置1

4、课后,也要多练习编码,找一些练习去实现,或者去看一些代码是如何实现,尝试着自己去实现。

5、一开始尝试编码,优先去实现基本功能,不要去追求完美简洁的代码编写。

6、面对未知的领域不要害怕,要分析识别你所要编码用到的知识,去补充学习或者去搜索别人的经验分享来快速了解。不要让自己因为困难而卡住学习的进度,从而失去学习动力。

JavaScript:05 开发者技能与编辑器设置1

7、学习新知识也要分享,讲给同样感兴趣的人,多交流经验和心得体会。

8、让自己去做一些项目,熟练编码,遇到问题解决问题。

058 How to Think Like a Developer_ Become a Problem Solver!

本讲主要学习如何像开发者那样思考,成为解决问题的专家。

视频加载中...

解决问题,不是修复编码遇到的代码问题或者代码bug。

解决问题,需要静下心来,运用逻辑思维来分析问题。

本讲提供四步法来解决。

1、理清问题。针对要解决的需求,要问正确的问题,来理清需求。明确需求的细节,哪些是要考虑,哪些是要忽略。

JavaScript:05 开发者技能与编辑器设置1

2、拆分问题。实现全部的需求,先分解需求,把大问题分解成多个小问题来一个一个解决。这样就有了一个要实现的任务清单。

JavaScript:05 开发者技能与编辑器设置1

3、研究实现。针对任务清单去依次研究如何实现每个小任务。当然,如果遇到困难,也要求助搜索或其他网站去寻求解决方法。

JavaScript:05 开发者技能与编辑器设置1

4、写伪代码。使用编程语言的一些结构,将问题实现流程梳理出来。

JavaScript:05 开发者技能与编辑器设置1