vscode插件-格式化代码-工具

YogaMiller

已于 2023-07-19 23:34:11 修改

阅读量1w

点赞数 1

文章标签：前端 vscode

于 2022-05-05 17:56:56 首次发布

本文链接：https://blog.csdn.net/YogaMiller/article/details/124521540

版权

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

如果需要很多内容的替换,可以考虑用正则, 减少粘贴…