用Ubuntu进行Web前端开发

• 作者：Bougie
• 创建于：2018-07-27
• 更新于：2023-03-09

• 前端
• Linux

必备软件

1. Google Chrome

   • 下载链接：chrome64bit (opens new window)
   • 安装命令：sudo dpkg -i chrome.deb
   • 常用扩展：
     • gulp livereload
       可用于服务端模板渲染项目的热更新
     • Google 翻译
     • Vue Devtools
     • AdBlock
     • stylus
       把网页改成自己喜欢的样式，强迫症专享

2. VSCode

   • 下载链接：VSCode (opens new window)
   • 安装命令：sudo dpkg -i vscode.deb
   • 记录一下自己 Windows 上常用的插件（快捷键指安装 Sublime Text KeyMap）：
     • Sublime Text Keymap
       把 VSCode 快捷键转化为 Sublime，后述如果有提到快捷键都是基于此上的
     • Beautify css/sass/scss/less
       css 格式化，alt + shift + F
     • Code Runner
       可直接运行 Node JS、Python 脚本，alt + ctrl + N
     • Debugger for Chrome
       前端调试神器
     • Document This
       对方法或类进行注解，ctrl + alt + D, ctrl + alt + D
     • ESLint
       团队协作必备
     • GitLens
       查看改动历史
     • ivue
       空的 vue 文件输入v可直接生成 Vue 模板
     • Markdown Preview Enchanced
       可分屏预览 Markdown 文件，可将 Markdown 文件转化为 Html 文件、pdf 文件
     • React-Native/React/Redux snippets
       可能是关于 React 全家桶最全的扩展了
     • Vetur
       Vue 语法高亮、提示等

3. Git

   • 安装命令：sudo apt-get install git
   • 基本配置：

     git config --global user.name "xxx"
     git config --global user.email "yyy"
     

     VSCode 自带图形化 git 管理可以帮我们搞定绝大多数操作

4. Gimp --- Linux 上的 PS

   • 下载链接：Gimp Download (opens new window)
   • 使用文档：GIMP - GNU 图像处理程序 (opens new window)

5. Postman

   • 下载链接：Postman Download (opens new window)
   • 如何安装：Ubuntu 16.04 安装 Postman (opens new window)

6. Webstorm、Idea、Android Studio、Eclipse 等视情况而定

环境安装

1. Node JS

   sudo ln /**/node /usr/local/bin/node
   sudo ln /**/npm /usr/local/bin/npm
   

2. Java

   • Ubuntu 安装 JDK 7 / JDK8 的两种方式 (opens new window)

3. Android SDK

   • 安装 Android Studio 过程中会安装好

常用命令

1. apt-get

   # 修改软件源
   sudo gedit /etc/apt/sources.list
   
   # 更新软件源
   sudo apt-get update
   
   # 安装软件
   sudo apt-get install xxx
   
   # 删除软件
   sudo apt-get remove xxx
   
   # 修复软件源
   sudo apt-get install -f
   
   # 更新已安装的包
   sudo apt-get upgrade
   

2. dpkg

   # 安装.deb文件
   sudo dpkg -i xxx.deb
   

3. 文件操作

   # 查看文件目录
   ls
   
   # 删除文件，-f表示强制
   sudo rm -f xxx
   
   # 拷贝文件
   sudo cp xxx xxx.bak
   
   # 移动文件
   sudo mv xxx /dir
   
   # 重命名文件
   sudo mv xxx xxx.bak
   
   # 查找文件
   sudo find / -name sources.list
   
   # 创建文件夹
   sudo mkdir dir
   
   # 删除空文件夹
   sudo rmdir dir
   

科学上网

搬瓦工 VPS 搭配 Shadowsocks，写好 shadowsocks 配置文件

sudo apt-get install shadowsocks
sslocal -c shadowsocks.json

启动完成后不能关闭终端

其它

1. 美化（强迫症专享）

   • Ubuntu18.04（Gnome 桌面）主题美化，Mac 私人定制 (opens new window)

2. 输入法

   • 解决 Ubuntu 18.04 中文输入法的问题，安装搜狗拼音 (opens new window)

对比 Windows

优势

1. 命令行优势

   # 多步命令
   cd android && ./gradlew assembleRelease
   

2. 安全性
3. 稳定性

劣势

1. 图形化应用缺失
   无 QQ、PS 等，可以用 CrossOver、Wine 等安装 Windows 应用，但性能大幅下降。Gimp 在易用性和功能性上和 PS 差距颇大。

< 记一次今日头条前端笔试 前方的路 >