Fork me on GitHub

vscode insiders 笔记

神器vscode insiders

遇到vscode,我放弃了atom,vscode真是越用越喜欢,会让人痴迷,强大的插件系统,没有做不到,只有想不到,下载vscode insiders可以获得每日构建的最新版本。那么就来记录一下我觉得好用的插件和记录一些问题吧。

Javascript(ES6)code snippets

这个插件实现了一些es6最新语法的常用代码片段,例如输入 imd 可以自动生成如下代码片段:

1
import { } from 'somewhere';

还有更多

imp→ imports entire module import fs from ‘fs’;
imn→ imports entire module without module name import ‘animate.css’
imd→ imports only a portion of the module using destructing import {rename} from ‘fs’;
ime→ imports everything as alias from the module import * as localAlias from ‘fs’;
ima→ imports only a portion of the module as alias import { rename as localRename } from ‘fs’;
enf→ exports name function export const log = (parameter) => { console.log(parameter);};
edf→ exports default function export default (parameter) => { console.log(parameter);};
ecl→ exports default class export default class Calculator { };
ece→ exports default class by extending a base one export default class Calculator extends BaseClass { };
fre→ forEach loop in ES6 syntax array.forEach(currentItem => {})
fof→ for … of loop for(const item of object) {}
nfn→ creates a named function const add = (params) => {}
dob→ destructing object syntax const {rename} = fs
dar→ destructing array syntax const [first, second] = [1,2]
sto→ set timeout helper method setTimeout(() => {});
sti→ set interval helper method setInterval(() => {});
prom→ creates a new Promise return new Promise((resolve, reject) => {});
clg→ console log console.log(object)

不仅如此,由于最新的vscode已经支持全局变量自动导入,也就是以上代码写好后{}里面不导入任何模块,但是在当前文件的代码提示中仍然可以获取到全局变量提示,然后自动将变量填入{}中。盗用一下别人的图就是这样:

是不是灰常酷炫,一颗赛艇!

vscode-icons

这个插件可以修改侧边栏中文件夹的图标,看着更舒服。自己的编辑器,怎么舒服怎么来嘛对不对?

ESLint

这个插件为 VS Code 增加 ESLint 的功能,同样时安装后重启生效。如果使用vue开发,需要做些额外的工作,修改配置文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "html", "autoFix": true },
{ "language": "vue", "autoFix": true }
],
"files.associations": {
"*.vue": "vue"
},
"eslint.options": {
"plugins": ["html"]
}

vue文件是类 HTML 的文件,为了支持对 vue 文件的 ESLint,需要全局安装好所需插件,eslint-plugin-html,最后,别忘了在项目根目录下创建 .eslintrc.json

遇到一个问题,求大神帮忙解决,类似问题在这里,但是我还没解决

Atuo Rename Tag

修改 html 标签,自动帮你完成尾部闭合标签的同步修改

Path Intellisense

自动路劲补全,默认不带这个功能的,赶紧装

fileheader

顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间

-------------本文结束感谢您的阅读-------------
如果您觉得受益了,欢迎打赏鼓励。