前端【VUE】09-vue【Eslint】【vscode格式化插件】

一、ESLint

　　在vscode插件中搜索ESLint，https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

　　

 

什么是 ESLint

　　官方概念：ESLint 是可组装的 JavaScript 和 JSX 检查工具。

　　通俗理解：一个工具，用来约束团队成员的代码风格。

　　当通过 @vue/cli 脚手架工具安装项目后，默认已经将 eslint 相关的包安装并配置好了。

　　我们将使用vue 的 eslint 插件规定的默认规则进行代码检查。

　　如果需要查看规则，则可以查看 https://eslint.nodejs.cn/docs/latest/rules/。

如何配置ESlint

　　关于ESLint的配置，需要放到配置文件 .eslintrc.js 中。

　　打开 .eslintrc.js 文件，找到里面的 rules 节点，这个 rules节点，用于自定义 ESLint规则

　　比如，我们配置每条语句结束，必须加分号，则需要在 rules节点中加入如下规则：

1 "rules": {
2   "semi": ["error", "always"]
3 }

　　修改了配置文件，需要重启项目（终端窗口要 重新 npm run serve）

 

安装自动格式化插件

　　这种插件很多。比如说 ESlint、Vue插件，都带这种格式化功能 
 1 // 代码缩进 2 个空格
 2 "editor.tabSize": 2,
 3 // 保存（包括自动保存），自动格式化
 4 "editor.formatOnSave": true,
 5 // 按Ctrl + S保存时，自动修复
 6 "editor.codeActionsOnSave": {
 7   "source.fixAll.eslint": true
 8 },
 9 // 编辑器窗口失去焦点时，自动保存代码【可选】
10 "files.autoSave": "onFocusChange",
11 // 配置vue默认的格式化程序【必须的配置】
12 "[vue]": {
13   "editor.defaultFormatter": "numso.prettier-standard-vscode"
14 },
15 // 设置JS文件的默认格式化程序【必须的配置】
16 "[javascript]": {
17   "editor.defaultFormatter": "numso.prettier-standard-vscode"
18 },
19 "[jsonc]": {
20   "editor.defaultFormatter": "numso.prettier-standard-vscode"
21 },

 

posted @ 2024-04-08 17:11  为你编程  阅读(287)  评论(0)  编辑  收藏  举报