美文网首页
前端开发环境构建

前端开发环境构建

作者: 大脸猫_2e21 | 来源:发表于2019-02-24 12:38 被阅读0次

最近刚买了新的mbp,白纸一样的宝贝当然需要好好勾画一下了,由于本人从事前端开发相关工作,每次换新电脑都要在网上查找开发环境搭建的一些文章,包括vscode的插件,item2的配色方案,以及github的ssh配置。今天刚搭建完环境,趁热打铁写篇总结,省的下次再需要搭建环境还要百度。

  • vscoded及插件安装
    vscode下载地址,直接下载安装。
    由于直接下载安装的vscode是英文版本的,如果不习惯可以在应用商店里面搜索chinese插件安装,就会成文中文版本的vscode了。是不是很方便哇。
    vscode安装的插件有:
    Auto Close Tag 自动闭合HTML标签
    Auto Rename Tag 修改HTML标签时,自动修改匹配的标签
    Bracket Pair Colorizer 2**!它为代码中的各种结对的括号提供了颜色高亮等功能,有了它你再也不用对着编辑器数括号了。
    HTML CSS Support html css 代码自动补全
    HTML Snippetshtml 代码片段补全
    JavaScript (ES6) code snippets ES6的代码片段
    jQuery Code Snippetsjquery的代码片段
    open in browser允许直接在浏览器中打开当前文件,这个看情况安装,我一般是本地起服务
    veturVetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件
    ESLint 代码规范和错误检查。关于eslint的配置,我只设置了针对vue文件的配置。vscode里打开 文件>首选项 > 设置, 在用户设置setting.json里面:可以这样设置
{
 //配置eslint
    "eslint.autoFixOnSave": true,
    "files.autoSave":"off",
    "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       { "language": "vue", "autoFix": true }
     ],
     "eslint.options": {
        "plugins": ["html"]
     },
     //为了符合eslint的两个空格间隔原则
     "editor.tabSize": 2   
}
//如果还想设置其他规则 请自行百度 我对这方面也不是太了解.

以上关于eslint配置参考在Vue.js项目中,使用的是eslint检查

  • item2的下载及安装
    iterm2的下载地址
    关于iterm的配色方案,可以使用iterm的自带的配色,在iterm2>preference>profiles>colors>color presets 里面选择。如果想要使用其他配色方案,在color presets 下拉框里面有import 可以导入其他配色方案。我选择的是iterm2官方提供的,官方下载地址,下载好了之后在打开color presets 使用import导入
    image.png ,我使用的是Solarized dark higher contrast。 大家看个人喜好选择。参考自 Mac 下iterm2配色方案(高亮)及显示分支

在需要iterm2的时候用快捷键呼出来,在不需要的时候让其退下的设置方式iterms>preference>keys左侧 Hotkey 选项 勾选 Show/hide iTerm2 with a system-wide hotkey
并且可以在 Hotkey 文本框处 设置一个你喜欢的全局快捷键 .
mac 下 使用 iterm2 配置及快键键使用

  • git的下载及安装
    git 下载地址
  • 更改镜像源,使用npm,需要安装node.js 这个就不介绍了,去官网直接下载就好了
//这样有助于下载速度,有些服务器可能是国外的,用了淘宝镜像源之后可以加快下载安装速度
 npm config set registry https://registry.npm.taobao.org/
//如果不想使用淘宝镜像源了
npm config delete registry
  • 为github添加ssh
cd ~/.ssh  //检查是否存在id_rsa.pub 
//如果已经存在id_rsa.pub,执行
cat id_rsa.pub //复制里面的内容  添加到github里面
//如果不存在 则执行如下命令生成
ssh-keygen -t rsa -C "用户名@gmail.com" //在这个过程后会让你选择公钥和私钥的存储路径 如果你在根路径下生成的  直接回车就行  然后在根路径下执行
ls -a 命令 找到 id_rsa.pub
查看文件,复制内容添加到github就行了。

相关文章

  • 构建前端开发环境

    开发工具建议使用vscode,里面包含很多插件,功能强大 建议安装vscode插件:tslint,eslint,y...

  • 前端开发环境构建

    最近刚买了新的mbp,白纸一样的宝贝当然需要好好勾画一下了,由于本人从事前端开发相关工作,每次换新电脑都要在网上查...

  • webpack

    webpack webpack是一个前端构建工具,前端构建工具就是把开发环境的代码转化成运行环境代码。一般来说,开...

  • express+mock+webpack devserver构建

    express+mockjs+webpack devserver构建前端本地开发mock环境 概述 背景 实际项目...

  • docker 构建前端项目, 公共 node_modules 镜

    docker 构建前端项目, 公共 node_modules 镜像 目的 通过docker 快速搭建项目开发环境 ...

  • 前端技术堆栈

    目前项目采用的技术堆栈 一. 开发环境的构建 前端(PC和H5)的开发环境是以nodejs为驱动, 使用expre...

  • 用Yeoman + gulp + webpack 来管理你的前端

    一. 前言 Yeoman:前端脚手架,快速搭建前端开发环境,优化工作流~Gulp:工程化构建工具,基于task来处...

  • 如何搭建一个比较省心的前端开发环境

    根据 《windows下使用Yeoman快速构建web项目(当前web富前端开发最全环境配置)》整理所得。 1、安...

  • react.js + webpack + superagent

    最近再熟悉公司后台管理系统的前端部分(已实现前后端分离),使用webpack来做前端自动化构建(开发环境使用web...

  • 『前端工程化』gulp(gulp3 && gul

    Gulp 什么是Gulp Gulp是基于Node.js的构建工具,我们使用它来集成前端开发环境,来构建自动化工作流...

网友评论

      本文标题:前端开发环境构建

      本文链接:https://www.haomeiwen.com/subject/bahyeqtx.html