工欲善其事必先利其器！你vscode配置了这些吗？vscode设置提示@路径和~@路径 prettier忽略 eslin

vscode 设置提示 @ 路径和 ~@ 路径

菜鸟最近用公司的电脑开发，结果发现之前有的路径提示全没了，感觉非常难受，然后去插件一看才发现，好像是菜鸟自己不小心把这个插件给删了

在这里插入图片描述

有点难受！

但是安装了这插件还是有点不好用，就是感觉每次使用了 vue 的 @ 或者 ~@ 开头的路径时，总是没有提示，所以今天菜鸟心一横决定解决！先去群里问了，才知道原来要使用配置文件 jsconfig.json

这里就不说废话了，直接上才艺！

1、首先需要下载上面的插件

2、在vscode中找到设置，并点击 在 setting.json 中编辑

在这里插入图片描述

添加如下配置：

"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转换成小写！

解决办法：

.fromname {
  /* prettier-ignore */
  font-size: 40PX;
}

js

如果是js中不想 prettier 进行转换，那么可以这样：

// 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中，之前项目不是你开发的，但是别人为了方便这样写了！

例子：

<el-button @click="a=true;b=4"/>

这种情况下，prettier 会把其变成这样：

<el-button
 @click="
  a=true
  b=4
 "
/>

但是别人配置的eslint又不能这样写，那么你只能使用这种办法！

创建一个 .prettierignore 文件

在里面输入：

# 忽略整个文件夹 
public/

# 忽略特定文件 
src/components/IgnoredComponent.vue 

# 使用通配符忽略某种类型的文件 
*.html 

# 忽略 src/components 文件夹中的所有 Vue 文件
src/components/*.vue 

# 忽略嵌套文件夹中的所有 JavaScript 文件 
src/**/*.js

eslint 忽略也类似

eslint 忽略

关闭段落校验

/* eslint-disable */
some code
some code
/* eslint-enable */

2. 关闭下一行校验

// eslint-disable-next-line
some 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插键

这里菜鸟给各位推荐的是几个好用的前端开发插件（必安）：

Chinese (Simplified) Language Pack for Visual Studio Code （不喜欢英语必安）
GitLens — Git supercharged【收费了】替换成 --> Git Graph(强推，必安) 【建议两个都安，GitLens这个可以直接把鼠标放在文件某一行，就能直接看见是谁什么时候提交的，还是有用的，见虽然理解git命令，但是我选择vscode插件！】
HTML CSS Support —— 自动提示你项目里已经存在的 CSS 类名和 ID（必安）
Path Intellisense（必安）
Todo Tree ——（没完成的加个 TODO：，必安）
EditorConfig for VS code | Eslint | Prettier - Code formatter | jsdoc （这四个都是项目规范，必安）
TRAE AI: Coding Assistant —— 不能用chatGPT、Cursor的平替，可以直接读取整个项目、甚至可以帮你修复vscode的一些配置问题
GitHub Copilot —— 会捆绑下载GitHub Copilot Chat，和Trae互补了，可以行内修复
Tailwind CSS IntelliSense —— 用tailwind必下，tailwind不了解的可以看看工作两年，最后从css转向tailwind了！

vue3 必安插件

Vue (Official)
Vue Extension Box（一系列工具包，可下载后卸载不用的）

按需求安装

Beautify css/sass/scss/less —— 有prettier就不用下载了
CSS Peek —— css类名可以跳转到使用的地方（如果用了Sass、less的&xxx不一定可以跳，tailwind就更不会跳了）
Auto Rename Tag —— 不推荐使用了，虽然好用，但是改错了，就没提示了
Auto Import —— 感觉现在vscode提示可以了，不用下载
Code Spell Checker —— 检查有没有错误单词的
indent-rainbow —— 不同颜色区分块级作用域（vscode现在默认有了）
open in browser —— 把html在浏览器中打开（老项目必安）
Live Server —— 把一个打包好的项目运行到本地serve中，但是表现和nginx不太一样【见：vue 引入图片的问题 - 已解决】（必安）
SCSS Formatter + Sass (.sass only) —— sass必安
Version Lens —— 查看项目依赖版本信息，并提示依赖是否有新版本可升级的插件
i18n Ally（国际化很有用 --> 但是菜鸟使用后发现无效，不推荐了！）

注意 —— git

认准这两个（其实Git Graph就完全够用了）：

感觉vscode还是一个项目一个窗口比较好，就是和idea一样，这样不仅搜索的时候不会相互影响，拉取仓库的时候也有提示！

具体操作见：虽然理解git命令，但是我选择vscode插件！

如果没有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可以参考该博客

注意 —— open in browser

请认准这个

反正不知道为什么，我先下的一个就是残缺的，没有打开除了默认浏览器之外的浏览器的功能，也不能右键直接打开，完全不明所以，所以请大家一定下对！！！

有了这些强大好用的工具，接下来就是如虎添翼了，大家一起加油！！！

那些被vscode内置的插件，如果你发现你没有，可以参考该文章设置即可：你可能不需要这些 VSCode 插件了

工欲善其事必先利其器！你vscode配置了这些吗？

vscode 设置提示 @ 路径 和 ~@ 路径

jsconfig.json

vscode 阻止 prettier 格式化

css

js

template(重点)

eslint 忽略也类似

vs code快捷键

vs code插键

vue3 必安插件

按需求安装

注意 —— git

注意 —— open in browser

vscode 设置提示 @ 路径和 ~@ 路径