vscode插件-格式化代码-工具
代码格式shift alt f 格式得到名称描述veturvue文件高亮 vue文件的格式化prettier.pretierrc 文件
·
vuejs.org
- shift alt f 格式化; 通常会设置 formatOnsave
- 比如设置了不生效, 缩进(2 4) 换行(printWidth) 单双引号, 末尾分号
vue格式化失效了, 这里设置成 esbenp.prettier-vscode
智能路径提示
1.安装 path-intellisense 插件
2. settings.json 配置
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
不用这个插件,只配置jsconfig.json文件, 路径提示也有
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"@md/*": ["src/modules/*"]
}
},
"exclude": [
"node_modules"
]
}
"vetur.format.scriptInitialIndent": true // script首层缩进.
https://prettier.io/docs/en/options.html
.prettierrc
{
"semi": false, 分号不要
"singleQuote": true, 要单引号
"printWidth": 120, 行宽(字数)
"trailingComma": "none", 末尾逗号
"arrowParens": "always", 箭头函数的括号
"singleAttributePerLine": true 设置成true的话, 超过一个属性就会换行;
"useTabs": true
}
.prettierignore
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
"prettier": "prettier --write ." // 格式化所有文件, 忽略文件.
husky 配置(commit前, 进行eslint检查...)
emmet语法
vscode 自带的插件
!回车生成html结构
ul>li.a{$}*10
<ul>
<li class="a">1</li>
<li class="a">2</li>
<li class="a">3</li>
<li class="a">4</li>
<li class="a">5</li>
<li class="a">6</li>
<li class="a">7</li>
<li class="a">8</li>
<li class="a">9</li>
<li class="a">10</li>
</ul>
my-component.a
<my-component class="a"></my-component>
代码注释
这种注释只要在vscode这样打出来就可以了. => /**
/**
*
*/
插件
插件 | 作用 |
---|---|
vetur/volar(vue3) | vue文件高亮 vue文件的格式化 |
prettier | .pretierrc 文件 |
editorConfig for Vs code | .editorconfig |
eslint | .eslintrc.js |
tslint | |
vue-helper | 可以帮助定位源码 |
auto Rename tag | 修改一个标签, 自动修改一对儿 |
auto close tag | 有了 auto rename 可以不用 |
beautify | 有prettier了, 可以不用 |
vscode-icons | 好看的图标 |
Bracket Pair Colorizer | 括号多颜色 |
open-in-browser | alt b 打开浏览器 |
path intellisense | |
Turbo Console Log | ctrl alt L 生成 console.log(…) |
live server | |
markdown preview enhanced | |
vue 3 snippets | |
local history | |
Git Graph GitHub Pull requests | |
Import Cost | 引用包大小计算 |
GitLens | git的提交日志 |
css peek | 定位css类名 |
Regex Previewer | 实时正则预览(自己试了下,没有生效!!!) |
ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
vscode 搜索替换
- 搜索的时候一定要注意有没多输入空格什么的.
Browserslist: caniuse-lite is outdated. Please run:npx browserslist@latest --update-db
如果需要很多内容的替换,可以考虑用正则, 减少粘贴…
更多推荐
已为社区贡献2条内容
所有评论(0)