@jouch 2019-09-02T03:52:31.000000Z 字数 1483 阅读 530

前端开发环境配置简述(VSC插件安装及phpStudy的简单配置)

常言道：工欲善其事必先利其器。对于初学编程的人来说，选择一款趁手的开发工具尤为重要，所谓高手，不但要有徒手写代码的能力，还要善于使用各类工具，弹指间代码已经写好，然后来一个九十度的潇洒转身，泡茶，看片......而 VS Code 就是这样的工具，她不但好用，而且还很好看，让我们撕开...哦不，是掀开她外面那层轻纱，看看她到底是个啥：

基于Atom构建，但速度更快

社区活跃，插件支持丰富

支持所有的主流编程语言

跨平台，集成Git，Emmet

代码自动补全，语义化检查，格式化

Win/Mac/Linux 全平台客户端

可以点击如上链接进入VS Code官网，选择对应的版本进行下载，安装。

VS Code主题与插件安装

VS Code插件和主题的安装、卸载特别简单与直观，可以在软件中的Extensions模块进行集中式管理，见下图。

常用插件(定期更新...)

Chinese(Simplified) Language Pack: 简体中文语言包
JS-CSS-HTML Formatter: JS/CSS/HTML格式化工具
Bracket Pair Colorizer 2: 括号自动配对检查器
Markdown Extended: Markdown 扩展
markdownlint: Markdown 语法语法检查器
Markdown Preview Enhanced: Markdown 实时预览
Meterial Theme: 目前全球全火的主题
Meterial Icon Theme: 与该主题配套的图标

phpStudy安装与配置

phpStudy是集成式PHP开发调试环境，内置php、Apache/Nginx、MySQL等常用工具软件，界面友好，简单易用。

Win/Linux 平台客户端
 官方帮助文档及疑问解答

本地站点创建及测试

启动phpStudy软件，在网站模块中创建自定义站点，保存后切回软件首页，启动Apache服务，见下图示例。

a. 创建站点

dev.io

b. 启动Apache

apache

c. 使用浏览器打开创建的站点，这里为dev.io，配置成功显示效果如下：

test

创建一个网页

打开phpStudy安装目录中的WWW文件夹，找到刚创建的main目录，在里面新建一个文件名为test.html的网页文件，当然，如果你愿意，也可以创建其它名称的文件，但是后缀一定要是是.html才行，并使用VS Code编辑它，我在里面输入的代码是这样的，请不要介意我的自恋：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>我的第一个HTML页面</title>
    </head>
    <body>
        <h1>我怎么这么帅~</h1>    
    </body>
</html>

VS Code截图

vsc

浏览器显示效果
one

测试网页或本地站点无法打开的原因分析

a.若测试网页无法打开，在浏览器中输入127.0.0.1或localhost，如果可以打开，说明Apache配置正确，且已经启动，只需检查hosts文件中的记录是否正确添加。

b.若输入127.0.0.1或localhost均无法打开网页，说明Apache配置不正确或未正常启动，检查配置文件并重新启动。

工作比较忙，8月的作业拖到了9月，惭愧，以后尽量按时完成。

作者 @Zhou
2019 年 09月 02日

php