前端环境搭建 -

Home > List of blog posts > 前端环境搭建

Blogger Information

Blog 6

fans 0

comment 1

visits 3469

Special Recommendation

More>

Related recommendations

工具

编辑器: 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>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

前端环境搭建

2021-12-29 21:51:54