vscode 设置提示 @ 路径 和 ~@ 路径
vscode 设置提示 @ 路径 和 ~@ 路径
菜鸟最近用公司的电脑开发，结果发现之前有的路径提示全没了，感觉非常难受，然后去插件一看才发现，好像是菜鸟自己不小心把这个插件给删了
有点难受！
但是安装了这插件还是有点不好用，就是感觉每次使用了 vue 的 @ 或者 ~@ 开头的路径时，总是没有提示，所以今天菜鸟心一横决定解决！先去群里问了，才知道原来要使用配置文件 jsconfig.json
这里就不说废话了，直接上才艺！
1、首先需要下载上面的插件
2、在vscode中找到设置，并点击 在 setting.json 中编辑
添加如下配置：
bash 代码解读复制代码"path-intellisense.mappings": {
"@": "${workspaceRoot}/src",
"~@": "${workspaceRoot}/src"
},
3、在自己的项目下新建 jsconfig.json
并添加如下配置：
4、重启 vscode
然后你就可以享受极致的开发体验了！！！
jsconfig.json
从vscode转战trae，发现有的项目可以直接ctrl+点击引用跳转出来对应的引用文件，有的又不行，所以就研究了一下，发现了一个菜鸟平时疏忽的点！
菜鸟根据排除法确定了和jsconfig.json相关
发现回答中jsconfig.json似乎和编译器强相关？
vscode 阻止 prettier 格式化
css
css中，我们做适配的时候，可能会需要用到大写的PX 和 小写px，但是有了 prettier，虽然有好处，但是它会一直把大写的PX转换成小写！
解决办法：
css 代码解读复制代码.fromname {
/* prettier-ignore */
font-size: 40PX;
}
js
如果是js中不想 prettier 进行转换，那么可以这样：
js 代码解读复制代码// prettier-ignore-start
const myMessyCode = { shouldNot: "be formatted", otherKey: [1,2,3]};
function anotherFunction () { return "Messy but not formatted";}
// prettier-ignore-end
template(重点)
最坑的莫过于在vue的template中，之前项目不是你开发的，但是别人为了方便这样写了！
例子：
html 代码解读复制代码<el-button @click="a=true;b=4"/>
这种情况下，prettier 会把其变成这样：
html 代码解读复制代码<el-button
@click="
a=true
b=4
"
/>
但是别人配置的eslint又不能这样写，那么你只能使用这种办法！
创建一个 .prettierignore 文件
在里面输入：
shell 代码解读复制代码# 忽略整个文件夹
public/
# 忽略特定文件
src/components/IgnoredComponent.vue
# 使用通配符忽略某种类型的文件
*.html
# 忽略 src/components 文件夹中的所有 Vue 文件
src/components/*.vue
# 忽略嵌套文件夹中的所有 JavaScript 文件
src/**/*.js
eslint 忽略也类似
eslint 忽略
- 关闭段落校验
css 代码解读复制代码/* eslint-disable */
some code
some code
/* eslint-enable */
2. 关闭下一行校验
less 代码解读复制代码// eslint-disable-next-line
some code
vs code快捷键
vs code快捷键
代码行向左或向右缩进: Ctrl+[ / shift+tab 、 Ctrl+] / tab 注意：(ctrl+的可以在行尾)
向上或向下移动一行: Alt+Up 或 Alt+Down
向上或向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down
快速删除一行：ctrl+k | ctrl+x
同步修改：ctrl+D
文件内查找: Ctrl+F
鼠标同步上下行：Ctrl+alt+up/down
查找文件：编译器头部的搜索 / ctrl+p
vs code插键
vs code插键
这里菜鸟给各位推荐的是几个好用的前端开发插件：
- Auto Rename Tag（不推荐使用了，虽然好用，但是改错了，就没提示了）
- Auto Import （感觉现在vscode提示可以了，不用下载）
- Beautify css/sass/scss/less
- Chinese (Simplified) Language Pack for Visual Studio Code （不喜欢英语必下）
- CSS Peek （必下）
- Easy LESS
- GitLens — Git supercharged【收费了】替换成--> Git Graph(强推) 和 Git History(补充git Graph没有看单个文件提交记录的能力)
- HTML CSS Support
- indent-rainbow （vscode现在默认有了）
- Live Server （必下）
- Path Intellisense（必下）
- open in browser（必下）
- SCSS Formatter + Sass (.sass only) [ 这个是 Vue Extension Box 会默认下载的 ]
- Todo Tree（没完成的加个这个，nice）
- Version Lens（菜鸟没玩明白）
- codeif （自动取变量名，但是菜鸟没玩明白 -- 被下架了，搜不到了）
- EditorConfig for VS code | Eslint | Prettier - Code formatter （这三个都是项目规范，后两个必下）
- i18n Ally（国际化很有用 --> 但是菜鸟使用后发现无效，不推荐了！）
- MarsCode AI: Coding Assistant （不能用chatGPT的平替）
- JavaScript (ES6) code snippets
- GitHub Copilot Chat （下载后和Trae一样的体验感）
vue3 必安插件
- Vue - Official
- Vue Extension Box（一系列工具包，可不下）
- Vue 3 Snippets
注意
强调一下第7个
认准这两个：
感觉vscode还是一个项目一个窗口比较好，就是和idea一样，这样不仅搜索的时候不会相互影响，拉取仓库的时候也有提示，如果这样的话，其实 vscode Git Graph + git history 就已经能媲美 gitlens 了！
具体操作见：虽然理解git命令，但是我选择vscode插件！
强调一下第8个（如果没有git，其会报错）
GitLens was unable to find Git. Please make sure Git is installed. Also ensure that Git is either in the PATH, or that 'gitlens.advanced.git' is pointed to its installed location.
报错后需要先下载git，然后设置git的路径
git设置：
左下角齿轮->设置->扩展->git->Path(编译)->git.exe路径（linux风格）
eg："git.path": "F:/Git/bin/git.exe"
安装git可以参考 该博客
菜鸟就是按照这个来的，里面很详细！！！
强调一下第13个
请认准这个
反正不知道为什么，我先下的一个就是残缺的，没有打开除了默认浏览器之外的浏览器的功能，也不能右键直接打开，完全不明所以，所以请大家一定下对！！！
有了这些强大好用的工具，接下来就是如虎添翼了，大家一起加油！！！
那些被vscode内置的插件，如果你发现你没有，可以参考该文章设置即可：你可能不需要这些 VSCode 插件了
项目规范见：vue3+eslint(推荐配置)|prettier+elementplus+国际化+axios封装+pinia
评论记录：
回复评论：