前端环境搭建

工具

编辑器: vscode官网下载
浏览器: google官网下载，firefox官网下载

vscode常用插件

1. 以下插件并非需要全部安装, 大家可根据自己情况,确定安装哪些

2. 插件安装并非越多越多,按需加载即可,过多插件会拖慢 vscode 执行速度

3. 根据进度,会逐渐增加插件,更多主题 https://vscodethemes.com/

4. chrome 常用插件,因为政策原因,无法使用 chrome 应用商店,先略过

插件名称	插件功能	应用分类
chinese(simplified …)	简体中文包	通用
live server	实时预览	通用
prettier-code formatter	最流行的代码格式化插件	通用
path intellisense	路径自动感知填充	通用
helium icon theme	一款我喜欢的文件图标主题	通用
one dark pro	经典的主题,使用者众多,很耐看	通用
material theme	经典”材料”主题	通用
material theme icons	常与`material theme`配置的文件图标	通用
shades of purple	赛博朋克风格的一款主题,很明亮风骚	通用
dracula official	经典的吸血鬼主题	通用
dracula at night	个人更喜欢这款小众的吸血鬼暗黑版(教学用它)	通用
code runner	几乎可以快速运行常见的所有语言,如`php,java,js...`	通用
codesnap	快速生成苹果电脑风格的代码片断截图,分享时使用	通用
markdown preview…	markdown 实时预览	markdown
markdownlint	markdown 语法检查器	markdown
auto close tag	标签自动关闭	html/css
auto rename tag	标签自动更名	html/css
indent-rainbow	以不同颜色显示代码缩进	html/css
css peek	查看并跳转到 css 定义位置	html/css
html css support	css 自动智能补齐	html/css
intellsense for css …	html 中的 css 智能提示	html/css
easy less	less 实时编译	html/css
px-to-viewport	自动转 vw	html/css
svg preview	svg 预览器	html/css
tailwind css …	无需离开 html 就可快速构建出现代网页	html/css
tabout	按 tab 就可快速跳到下一下,或跳出/越过括号等	html/css
bracket pair …	括号高亮配对提示	js/es6/node/vue
javascript(es6) code snippets	常用 js 代码片断	js/es6/node/vue
node-snippets	常用 node 代码片断	js/es6/node/vue
quokka.js	js/es6 代码语法实时检查/执行器(续命法宝)	js/es6/node/vue
rest client	可不离开 vscode 环境进行 api 请求测试	js/es6/node/vue
eslint	js 代码质量智能分析器	js/es6/node/vue
veur	vue 语法高亮,智能感知,emmet 等	js/es6/node/vue
vue3 snippets	vue3 常用代码片断	js/es6/node/vue
vue-helper	vue-helper: 在扩展中使用的 vue 提示,如 element ui	js/es6/node/vue
php intelephense	php 语法提示/自动补齐	php
php intellisense	php 代码跟踪/重构/自动完成	php
php debug	php 代码调试器	php
php docbloker	php 生成块级注释	php
vscode-database	vscode 数据库 SQL 支持插件	php

等宽字体

安装适合编程的等宽字体

为什么写代码应该使用等宽字体?

为了从视觉上快速区分,0 和 o, 1 和 l, 等宽字体可以做到,全部字符采用相同宽度,可有效解决它

给大家推荐一款现在大神都在热捧和推荐的”等宽字体”,支持”连写”,让代码样式更接近自然语言
观察以下代码片断,全等,小于等于等符号,与我们平时书写习惯完全一致,外行人也知道这是什么意思

const flag = true;
if (true === flag) {
  console.log("不上班了");
}
for (let i = 0; i <= 10; i++) {
  console.log(i + 1);
}

字体下载:https://github.com/tonsky/FiraCode

字体安装成功后,还需要在 vscode 中进行配置: settings.json

 // 将Fira Code 字体放在第一个
 "editor.fontFamily": "'Fira Code',Consolas, 'Courier New', monospace",
 // 打开允许连写开关
 "editor.fontLigatures": true,

还有一款字体,是商业编辑器之父jetBrains提供给我们的免费编程字体JetBrains Mono

html文档

<!-- 文档类型 -->
<!DOCTYPE html>
<!--根元素：设置页面语言 -->
<html lang="en">
<!-- 页面头元素：页面描述，供浏览器或搜索引擎解析时使用 -->
<head>
    <!-- 元标签：设置默认字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 浏览器兼容,原用于IE8适配,可确保按IE最高版本来解析页面,可有可无,现在微软也采用了Chrome内核 -->
    <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>

工具