【vscode高级玩家】VSCode 远程开发(带免密)

简介

Visual Studio Code(以下简称 VS Code)从1.35.0版本正式提供可以在本地编辑远程开发环境的文件的功能,具体实现如下图
在这里插入图片描述

安装完成Remote Development后,,可以极大地简化各种情况下的开发和故障排除,您可以

  1. 在您部署的同一操作系统上进行开发,或者使用比本地计算机更大,更快,更专业的硬件。
  2. 在不同的远程开发环境之间快速切换,安全地进行更新,而不必担心影响本地计算机。
  3. 从多台计算机或位置访问现有开发环境。
  4. 调试运行在其他位置(如客户站点或云中)的应用程序。

    以上都摘自remote-ssh的官方,下面开始正式教程


本次测试在windows下进行,远程服务器为centos7,但理论上可以在任何支持ssh并联网的的机器之间进行

开始前准备

(必须)Remote Development插件以及可以正常ssh连接的远程计算机
(非必须)xshell,xftp,gitbash
VSCode直接搜索Remote Development插件并安装即可,ssh的远程计算机使用任意ssh软件可以正常连接即可

配置免密远程登录

在本地机器生成秘钥对

windos下的控制台默认没有ssh,但是gitbash里有,使用gitbash创建秘钥对

这一步如果你之前就已经有秘钥了的话,建议跳过

gitbash下输入

1
ssh-keygen -t rsa -C "这里任意输入" 

即可生成秘钥对,默认路径在C:\Users\Administrator.ssh,图中也已经指出了

在这里插入图片描述

现在在远程也使用相同的命令创建秘钥对

在这里插入图片描述

拷贝公钥到远程服务器上

这一步的目的是让远程机器的authorized_keys中包含我们的公钥内容
我服务器的authorized_keys中就包含多个公钥,一样都可以免密登录

使用xftp将本地ssh的公钥(id_rsa.pub)拷贝到远程服务器的root目录下
在这里插入图片描述

在xshell中输入cat ~/id_rsa.pub >> ~/.ssh/authorized_keys

在这里插入图片描述

到这一步就配置完免密了,接下来回到VSCode中

Remote Development配置

点击VSCode侧边栏的小屏幕标志再点击齿轮配置你的远程信息

在这里插入图片描述

这里我选择第一个设置你也可以自己另选配置项

在这里插入图片描述

Host 显示在连接选项中的名字,
HostName 你的ssh服务器的地址
User 你登录ssh时的用户名
在这里插入图片描述

配置完之后保存就可以看到侧边栏中更新了可以连接的服务器,接下来就可以像在本地开发一样进行远程开发了

查看更多有关vs code的使用方法

关于vscode的所有内容看这里

系列文章

推荐

【vscode高级玩家】VSCode 使用Settings Sync同步配置(2019版傻瓜教程)

之前无意中听到有人说,vsCode最大的缺点就是每次换个电脑或者临时去个新环境,就要配置一下各种插件,好不麻烦,以至于面试都不敢说自己用vsCode 说着无心,听着有意,因为我也发现了这个问题,索性认真找了一下网上的教程,发现网上的教程教程有些落后,过程复杂而且不容易成功,干脆自己去看最新文档,发现现在同步设置的方法简直不要太简单

阅读全文

【vscode高级玩家】vscode保存代码,自动按照eslint规范格式化代码设置

编辑器代码风格一致,是前端代码规范的一部分。同一个项目,或者同一个小组,保持代码风格一致很必要。就拿vue项目来说,之前做的几个项目,很多小伙伴代码格式化用的是vue-beautify ,这个格式化工具有个明显的缺点,就是三元不等式明明可以一行显示,非得格式化成3行,import用{}引入多个变量或者函数,非得格式化成好几行,看起来很是别扭。因此,好的格式化工具和团队代码风格一致,显得格外重要。我建议我们整个小组运用同一个编辑器,同一种代码校验,同一个格式化方式。下面我来介绍一下使用vscode+eslint 自动保存,自动格式化的一种方式!

eslint 自动格式化

先说一个前提吧,你在package.json中安装了eslint的依赖,不然配置无用。

1
2
3
4
"eslint": "^6.1.0",
"eslint-friendly-formatter": "^6.4.1",
"eslint-loader": "^6.4.1",
"eslint-plugin-html": "^6.4.1",

上面说的是一个前提,下面来说一下具体的配置步骤:

首先,在我们项目跟目录添加.eslintrc.js 文件,用于校验代码,编写eslint相关规则,关于eslint的一些具体规则,请查看eslint文档

下面列一下我们项目中常用的eslint规则:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

module.exports = {
root: true,
// 添加插件
"plugins": [
"vue"
],
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'vue/no-parsing-error': [2, {
'x-invalid-end-tag': false
}],
'no-undef': 'off',
'camelcase': 'off',
// 允许控制台输出
'no-console': 'off',
'accessor-pairs': 2,
'arrow-spacing': [2, { 'before': true, 'after': true }],
'block-spacing': [2, 'always'],
'brace-style': [2, '1tbs', { 'allowSingleLine': true }],
// 'camelcase': [2, { 'properties': 'always' }],
'comma-dangle': [2, 'never'],
'comma-spacing': [2, { 'before': false, 'after': true }],
'comma-style': [2, 'last'],
'constructor-super': 2,
'curly': [2, 'multi-line'],
'dot-location': [2, 'property'],
'eol-last': 2,
'eqeqeq': [2, 'allow-null'],
'generator-star-spacing': [2, { 'before': true, 'after': true }],
'handle-callback-err': [2, '^(err|error)$' ],
'indent': [2, 2, { 'SwitchCase': 1 }],
'jsx-quotes': [2, 'prefer-single'],
'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
'keyword-spacing': [2, { 'before': true, 'after': true }],
'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
'new-parens': 2,
'no-array-constructor': 2,
'no-caller': 2,
'no-class-assign': 2,
'no-cond-assign': 2,
'no-const-assign': 2,
'no-control-regex': 2,
'no-delete-var': 2,
'no-dupe-args': 2,
'no-dupe-class-members': 2,
'no-dupe-keys': 2,
'no-duplicate-case': 2,
'no-empty-character-class': 2,
'no-empty-pattern': 2,
'no-eval': 2,
'no-ex-assign': 2,
'no-extend-native': 2,
'no-extra-bind': 2,
'no-extra-boolean-cast': 2,
'no-extra-parens': [2, 'functions'],
'no-fallthrough': 2,
'no-floating-decimal': 2,
'no-func-assign': 2,
'no-implied-eval': 2,
'no-inner-declarations': [2, 'functions'],
'no-invalid-regexp': 2,
'no-irregular-whitespace': 2,
'no-iterator': 2,
'no-label-var': 2,
'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }],
'no-lone-blocks': 2,
'no-mixed-spaces-and-tabs': 2,
'no-multi-spaces': 2,
'no-multi-str': 2,
'no-multiple-empty-lines': [2, { 'max': 1 }],
'no-native-reassign': 2,
'no-negated-in-lhs': 2,
'no-new-object': 2,
'no-new-require': 2,
'no-new-symbol': 2,
'no-new-wrappers': 2,
'no-obj-calls': 2,
'no-octal': 2,
'no-octal-escape': 2,
'no-path-concat': 2,
'no-proto': 2,
'no-redeclare': 2,
'no-regex-spaces': 2,
'no-return-assign': [2, 'except-parens'],
'no-self-assign': 2,
'no-self-compare': 2,
'no-sequences': 2,
'no-shadow-restricted-names': 2,
'no-spaced-func': 2,
'no-sparse-arrays': 2,
'no-this-before-super': 2,
'no-throw-literal': 2,
'no-trailing-spaces': 2,
'no-undef': 2,
'no-undef-init': 2,
'no-unexpected-multiline': 2,
'no-unmodified-loop-condition': 2,
'no-unneeded-ternary': [2, { 'defaultAssignment': false }],
'no-unreachable': 2,
'no-unsafe-finally': 2,
'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }],
'no-useless-call': 2,
'no-useless-computed-key': 2,
'no-useless-constructor': 2,
'no-useless-escape': 0,
'no-whitespace-before-property': 2,
'no-with': 2,
'one-var': [2, { 'initialized': 'never' }],
'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
'padded-blocks': [2, 'never'],
'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
'semi': [2, 'never'],
'semi-spacing': [2, { 'before': false, 'after': true }],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'always'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [2, { 'words': true, 'nonwords': false }],
'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }],
'template-curly-spacing': [2, 'never'],
'use-isnan': 2,
'valid-typeof': 2,
'wrap-iife': [2, 'any'],
'yield-star-spacing': [2, 'both'],
'yoda': [2, 'never'],
'prefer-const': 2,
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'object-curly-spacing': [2, 'always', { objectsInObjects: false }],
'array-bracket-spacing': [2, 'never'],
'vue/jsx-uses-vars': 2
},
parserOptions: {
parser: 'babel-eslint'
}
}

其次,vscode中添加eslint和vetur插件:
如图所示

安装好了之后,会自动根据你上面配置的规则进行代码检查,不合格的会高亮显示,如下图:

经过上面步骤,目前保存还不能自动格式化,下面说下如何自动格式化!

自动格式化设置

1、window电脑:文件 > 首选项 > 设置 打开 VSCode 配置文件
2、mac电脑code>首选项 >设置

我的设置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


{
"editor.tabSize": 2,
"eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
"prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
"prettier.semi": false, //去掉代码结尾的分号
"prettier.singleQuote": true, //使用单引号替代双引号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
"vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" //属性强制折行对齐
}
},
"eslint.validate": [ //开启对.vue文件中错误的检查
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
}

关闭eslint检查

1、vue create的项目在vue.config.js中lintOnSave: false
2、以前的项目,vue init webpack的config/index.js 文件。 将useEslint: true 设置为useEslint: false

其他推荐

其他团队也有自己的代码规范方式例如饿了么团队:https://www.npmjs.com/package/eslint-config-elemefe
vue团队:https://github.com/vuejs/eslint-config-vue
关于vscode扩展插件,目前通用的,不错的推荐看这篇文章:https://github.com/varHarrie/Dawn-Blossoms/issues/10

关于vscode的所有内容看这里

系列文章

推荐

在linux上安装taiga

Taiga 是一个免费开源,而且功能非常强大的项目管理平台,用于初创企业和敏捷开发团队。提供一个简单、漂亮的项目管理工具。

阅读全文

vue 提升首屏加载速度

最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考网上的各种方案优化

阅读全文

【vscode高级玩家】VScode 插件推荐(献给所有前端开发者)

HTML Snippets

初级H5代码提示,很实用

在这里插入图片描述

CSS Formatter

给CSS代码提供格式化支持 按alt+shift+f即可一键格式化代码

CSS Peek

在HTML源码中查看CSS类的定义 按F12直接跳转到定义编辑页,按alt+F12则可以再当前页面查看CSS类的定义

在这里插入图片描述

JS & CSS Minifier

用来压缩css和js文件 按下F1后输入minify即可使用 会在原路径中生成对应的.mim.js和.min.css文件

css-minify

安装前面那款可以不用安装这个
按ctrl+F1启动css minify(没有反应的话就按下F1输入css-minify) >用来压缩css文件 在css原路径中生成 [你的文件名].min.css文件 保持源码没有变动的情况下大幅减少css文件体积

Quokka.js

可以实时显示js代码中的变量值 使用时先按F1输入quokka选择new file再开始写代码

在这里插入图片描述

HTML CSS Support

让 html 标签上写class 智能提示当前项目所支持的样式

在这里插入图片描述

vscode-icon

让 vscode 资源树目录加上图标,清晰易懂

在这里插入图片描述

Path Intellisense

自动补全路径
在这里插入图片描述

vscode-fileheader

按ctrl+alt+i 自动为文档加上作者信息,可以在插件设置里修改

在这里插入图片描述

Color Info

显示代码中颜色的详细信息 rgba cmyk 16进制的都可以使用 悬浮在颜色代码上即可看到详细信息

在这里插入图片描述

filesize

在vscode中显示当前文件的大小
按下Crtl-shift-‘可以在控制台显示当前文件的大小,压缩后大小,创建和修改日期

在这里插入图片描述

HTML Boilerplate

HTML5的代码模板 创建html文件后输入html即可使用

在这里插入图片描述

关于vscode的所有内容看这里

系列文章

推荐

javascript 解决默认取整的坑(目前已知的最佳解决方案)

javascript 解决默认取整的坑(目前已知的最佳解决方案)

复现该问题

js在数字操作时总会取更高精度的结果,例如1234/10结果就是123.4,但是在c或者java中整数除以10的结果还是整数,小数部分被舍去,不仅如此 *,%等运算符也会出现这种结果,但我们有时候更希望舍去取整

阅读全文

nginx跨域处理

nginx参考文章

因为不太明白nginx的配置文件,吃了点亏,实际上操作起来非常简单

阅读全文