本文从以下几个方面展开:
- 使用vite创建项目
- 使用eslint+prettier规范项目
创建项目
- 使用NPM
npm init @vitejs/app
按照提示完成以下操作:
-
输入项目名称
-
选择框架,我们使用vue
-
选择vue+ts
4.最后就是安装依赖、运行项目
npm install
、npm run dev
集成prettier配置
Prettier 是一个强大的代码格式化程序,支持:JavaScript
、JSX
、Angular
、Vue
、Flow
、TypeScript
、HTML
、JSON
、YAML
...等。它删除所有原始样式并确保所有输出的代码符合一致的样式。
-
安装prettier
npm install prettier -D
-
创建配置文件 在项目根目录下面创建
.prettierrc
文件。(具体配置,可以查看官网Options){ "useTabs": false, "tabWidth": 4, "printWidth": 100, "singleQuote": true, "trailingComma": "none", "bracketSpacing": true, "semi": false }
-
vscode中使用需要安装插件,
ctrl+s
时就会读取.prettierrc
文件中的配置如果不起作用
ctrl+shift+f
选择格式化程序即可。 -
顺便提一下,prettier官网的文档配置怎么去看。
集成eslint配置
随着项目越来越大,每个程序员的风格都不统一,初代开发者还好,后续开发者可能会往死吐槽,Eslint的出现帮我们解决了这个问题。
概念:Lint 是检验代码格式工具的一个统称,具体的工具有 Eslint 等等 ..........
-
首先安装Eslint
npm install eslint -D
-
自动生成
Eslint
配置文件,详细见官网自动生成配置。在根目录执行npm脚本命令:
//使用npx npx eslint --init //或者按照官网来 ./node_modules/.bin/eslint --init
根据命令提示,完成操作:
-
How would you like to use ESLint? (你想如何使用eslint?)
To check syntax only(
只检查语法检查语法并发现问题
)
To check syntax and find problems(检查语法并发现问题
)
To check syntax, find problems, and enforce code style(检查语法,发现问题,并强制代码样式
) 我们选择 To check syntax, find problems, and enforce code style(检查语法、发现问题并强制执行代码风格)。 -
What type of modules does your project use?(您的项目使用什么类型的模块?)
JavaScript modules (import/export)
CommonJS (require/exports)
None of these 我们选择 JavaScript modules (import/export)。 -
Which framework does your project use? (你的项目使用什么框架?)
React
Vue.js
None of these(这些中没有任何一个
) 我们选择Vue.js。 -
Does your project use TypeScript?(你的项目中使用Typescript吗?)
Yes/No 我们选择Yes。
-
Where does your code run?(你的代码运行在?)
Browser(
浏览器
)
Node(Node
) 我们选择Browser -
How would you like to define a style for your project?(
你想给你的项目定义什么风格?
)Use a popular style guide(
使用一个流行的风格指南
)
Answer questions about your style(回答你关于风格的问题
)
Inspect your JavaScript file(检查你的javascript文件
) 我们选择 Use a popular style guide(使用一个流行的风格指南
) -
Which style guide do you want to follow? (
你想遵循是么样的风格指南?
)Airbnb: github.com/airbnb/java…
Standard: github.com/standard/st…
Google: github.com/google/esli…
XO: github.com/xojs/eslint… 上面四种风格都是社区流行的javascript风格指南,我们选择Airbnb: github.com/airbnb/java… 这个在github上面star最多的。 -
What format do you want your config file to be in?(
你希望配置文件的格式是什么?
)JavaScript
YAML
JSON 我们选择javascript格式的配置文件 -
最后一步就是,eslint根据上面我们选择的配置,来告诉我们:按照你这个配置,你需要安装哪些npm包,选择
Yes
就可以。
-
-
VSCode中使用Eslint需要安装Eslint插件
-
VSCode的配置
-
全局环境中配置
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true //ctrl+s保存的时候使用eslint修复 }, }
-
或者在局部配置
// setting.json文件中 { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, }
-
常见的问题
解决prettier
、eslint
冲突问题
在项目中,我们都是eslint
、prettier
组合使用,难免会有冲突。下面我们分俩个方面:
呈现冲突、解决冲突
-
呈现冲突
-
prettier的配置如下:
//.prettierrc.json文件中 { "tabWidth":2 , "singleQuote":true //开启单引号 }
-
eslint的配置如下: (只需关注
rules
里面配置的规则)module.exports = { env: { browser: true, es2021: true, }, extends: ['plugin:vue/essential', 'airbnb-base'], // 添加 prettier 插件, parserOptions: { ecmaVersion: 12, parser: '@typescript-eslint/parser', sourceType: 'module', }, plugins: ['vue', '@typescript-eslint'], rules: { 'vue/no-multiple-template-root': 'off', quotes: ['error', 'double'],//引号规则为:“双引号”,否则一律按照 “error” 处理(你也可以改成warn试一下) }, };
此时当我们
ctrl+s
时,prettier会将所有的引号转成单引号
,而我们eslint引号规则为:双引号
,否则一律按照error
处理,这就形成了冲突。
-
-
解决冲突
-
安装插件
npm i eslint-plugin-prettier eslint-config-prettier -D
-
在
.eslintrc.js
文件中配置插件module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:vue/essential', 'airbnb-base', 'plugin:prettier/recommended',// 添加 prettier 插件 ], parserOptions: { ecmaVersion: 12, parser: '@typescript-eslint/parser', sourceType: 'module', }, plugins: ['vue', '@typescript-eslint'], rules: { quotes: ['error', 'double'], }, };
-
完美解决冲突
-
支持vue3.0中多根节点(fragements)
在Eslint
、Prettier
配置完毕后,你会发现,项目神奇的报错了。
-
错误原因:
The template root requires exactly one element.
// 模板只需要一个根元素 -
解决办法: 在
.eslintrc.js
文件中,配置rules
成功解决。module.exports = { env: { browser: true, es2021: true, }, ..., rules: { 'vue/no-multiple-template-root': 'off',// 关闭多根节点的校验 }, };
知识拓展
有时候,我们项目中配置了eslint
,报错了,但是你又不熟悉如何去配置某个规则。
比如console.log
这样的代码不应该为error
,或许应该为warn
更适合。下面我们来看个例子:
官网的配置:
在文件中你就可以配置: