标签 vscode 下的文章

前言

在上篇文章中,我们已经实现了VS code的无缝连接docker,却依旧存在着一些问题。比如它需要安装pylint方便调试,但是每次stop 容器之后,重新启动又需要重新安装,不可谓不麻烦。而且我发现它也需要重新安装VS code server,这是一个严重影响生产力的过程。所以目前的需求就变了如何作一些自定义的修改,并让这些修改永久性的保存。那答案当然是自定义的构建镜像啦,它可以让我们在构建的实践使用容器的过程中,将所做的更新持续化保存到自定义镜像。

自定义修改

在这里,我手动做了两个修改,一个是安装pylint,一个是更新pip

自定义修改容器

提交更改

docker commit -m="install pylint" -a="chauncey" tf chauncey/tf 

如上命令,将所有对容器的操作都保存至自定义镜像chauncey/tf 中。

测试效果

  1. 停止当前容器
docker stop tf
  1. 使用自定义镜像创建容器
docker run --gpus all -itd --name tf --rm -v ~/Project:/root/Project  chauncey/tf  
  1. 使用VS code远程连接,观察pip版本和pylint的安装情况。

pip版本和pylint的安装情况

如上图,我们发现pip已经是最新的版本。而且细心小伙伴会发现,连接容器时以及没有了install Dev container的提示了,这说明我们的VS code也已经预设安装进了镜像。

为什么需要?

我们在上一篇Ubuntu深度学习的相关配置中最后讲到,将工作目录下的文件装载到了容器之下,这样我们在主机中编写一个文件,如tf.py。在容器中执行,需要输入以下命令。

docker exec tf python './tf.py' 

这样每改一下文件,想要看效果的话,就需要输入以上命令。而且,还不方便调试。然后,我就在想能不能做到像我平常写代码那样,在VScode中,点一下就运行,而且可以调试呢?于是便有了本文。

准备工作

  • 安装好VScode并且保证互联网连接正常。然后将工作目录装载到容器的/root/Project目录下,不然/tmp的文件实在是太乱七八糟了。
docker run --gpus all -itd --name tf --rm -v ~/Project:/root/Project  tensorflow/tensorflow:latest-gpu-py3

操作流程

首先安装两个插件dockerRemote Development

VScode的docker插件

上图中可以看到tensorflow的容器已经处于运行中了,然后再打开Remote Development

Remote Development

显示有一个容器待连接,然后选择它,打开容器中的Project文件夹

VScode in Container

然后安装Python插件和调试工具,修改tf.py文件

import tensorflow as tf
print("hello tensorflow")

点击右边的运行图标,成功输出。

run tensorflow

打开主机文件

docker主机文件同步

发现修改也已经同步,Over,现在可以愉快的写代码了。

vscode

Vscode 格式化vue Template代码段

1.安装 vetur
2.在User Setting中增加设置:
"vetur.format.defaultFormatter.html": "js-beautify-html"

2020.07.08留:我现在已经使用prettier来格式化代码了

Vs code 添加 wepy template 代码

  1. 打开File > preference > user snippets, 选择vue
  2. 编辑vue.json
{
"Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $0 -->",
            "<template>",
            "  <view class='page'> </view>",
            "</template>",
            "",
            "<script>",
            "import wepy from 'wepy'",
            "export default class Index extends wepy.page {",
            "config = {",
            "    navigationBarTitleText: '场馆预订',",
            "    usingComponents: {}",
            "};",
            "",
            "components = {};",
            "",
            "mixins = [];",
            "",
            "data = {};",
            "",
            "computed = {};",
            "",
            "methods = {};",
            "",
            "events = {};",
            "",
            "onLoad() {}",
            "}",
            "</script>",
            "<style lang='less'>",
            "</style>"
        ],
        "description": "Log output to console"
    }
}

使用emmet自动代码补全

  1. 打开File > preference > setting, 搜索emmet.triggerExpansionOnTab
  2. 设置为true

自动读取eslint文件并进行修复

  1. 先安装eslint
  2. 设置中添加以下内容
{
  "eslint.autoFixOnSave": true, //  启用保存时自动修复,默认只支持.js文件
  "eslint.validate": [
    "javascript", //  用eslint的规则检测js文件
    {
      "language": "vue", // 检测vue文件
      "autoFix": true //  为vue文件开启保存自动修复的功能
    },
    {
      "language": "html",
      "autoFix": true
    },
  ],
}
2020.07.08留:这个配置已经过时了

正则删除HTML标签

Ctrl + H 正则匹配 <[^>]+> 替换为空

正则替换换行

Ctrl + H 正则匹配 \n 替换为你想要的

tab无法缩进代码

Ctrl + M试试

多光标操作

1、按住alt,用鼠标左键点击,可以出现多个光标,输入的代码可以在光标处同时增加。
2、按住Ctrl + Alt,再按键盘上向上或者向下的键,可以使一列上出现多个光标。
3、选中一段文字,按shift+alt+i,可以在每行末尾出现光标
4、按shift+alt,再使用鼠标拖动,也可以出现竖直的列光标,同时可以选中多列。