工欲善其事必先利其器！你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插键

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

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 插件了

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

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

jsconfig.json

vscode 阻止 prettier 格式化

css

js

template(重点)

eslint 忽略也类似

vs code快捷键

vs code插键

vue3 必安插件

注意

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