vscode上关于eslint与prettier的格式化风格统一（Vue3.x+ts）

2022-04-02

我们使用vue2.x+js的时候会用到eslint与prettier，同样在vue3.x里也会用到，只是我们观察业内主流项目发现，配置与2.x还是有些区别的，这里主要对vue3.x+ts的开发环境进行eslint+prettier的安装与使用方式进行说明

创建新的vue3.x+ts项目

清点配置

需要安装的依赖

安装需要的依赖

yarn add -D eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@^7.12.1 prettier@^2.2.1 @vue/cli-plugin-eslint@~4.5.0 @vue/eslint-config-prettier@^6.0.0 @vue/eslint-config-typescript@^7.0.0 eslint-plugin-prettier@^3.3.1

"eslint-plugin-vue@latest"   
"@typescript-eslint/eslint-plugin@latest",  
"@typescript-eslint/parser@latest",  
"eslint@^7.12.1",  
"prettier@^2.2.1",  
"@vue/cli-plugin-eslint@~4.5.0",  
"@vue/eslint-config-prettier@^6.0.0",  
"@vue/eslint-config-typescript@^7.0.0",  
"eslint-plugin-prettier@^3.3.1",

vscode需要安装的插件

我们需要给vscode安装插件：”dbaeumer.vscode-eslint” “esbenp.prettier-vscode”

调整项目settings.json配置

在项目根目录下增加.vscode/settings.json配置文件，它编辑器针对项目的配置；

你可以根据自己的习惯进行修改，比较重要的就是保存格式化，保存后应用的格式化里有eslint；

{  
 // 文件：文件自动保存，只要暂停输入  
 "files.autoSave": "afterDelay",  
 // 文件：文件保存机制：暂停输入3000毫秒即保存  
 "files.autoSaveDelay": 3000,  
 // 编辑器：保存即格式化  
 "editor.formatOnSave": true,  
 // 关闭编辑器对 js 文件的格式化，交给 ESLint 来做格式化，否则会格式化两次  
 "\[javascript\]": {  
 "editor.formatOnSave": false  
 },  
 "prettier.endOfLine": "auto",  
 // 编辑器：设置默认格式化工具 有了这个就不用每个类型的文件都设置一个格式化工具，大部分用prettier，只有特殊情况需要单独设置  
 "editor.defaultFormatter": "esbenp.prettier-vscode",  
 // 编辑器：保存时候的动作  
 "editor.codeActionsOnSave": {  
 // 保存的时候执行一次eslint校验  
 "source.fixAll.eslint": true,  
 // 保存的时候调整import顺序，按引入包字母顺序  
 "source.organizeImports": true  
 }  
}

添加配置文件到项目根目录

.eslintrc.js 文件规定了eslint的规范

module.exports = {  
 root: true,  
 env: {  
 node: true,  
 },  
 extends: [  
 "plugin:vue/vue3-essential",  
 "eslint:recommended",  
 "@vue/typescript/recommended",  
 "@vue/prettier",  
 "@vue/prettier/@typescript-eslint",  
 ],  
 parserOptions: {  
 ecmaVersion: 2020,  
 },  
 rules: {  
 "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",  
 "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",  
 "vue/multi-word-component-names": 0,  
 },  
};

prettier.config.js与.prettierrc.js文件规定了prettier的规范，增加endOfLine是为了兼容windows环境

1
2
3

module.exports = {  
 endOfLine: "auto", // 结尾是 \\n \\r \\n\\r auto  
};

完成效果

安装完以后会发现项目中一些文件开始有警告了，这时候ctrl+s保存文件即可以将文件格式化成我们想要的样子；

保存格式化后：

总结

vue3.x+ts与2.x的区别主要在于单双引号，以及对象最后一个属性后的逗号，还有单行代码后的分号；我们尽量使用官方推荐配置，因此你看到eslint会比2.x更简单，实际上使用的是默认配置；在项目中如果有哪些地方不符合团队习惯，可以单独在eslint配置文件中增加或修改。