第1步:
安装eslint
yarn add eslint -D
第2步:
在根文件夹中,创建.eslintrc.js文件
第3步:
在package.json文件中新增命令
"lint": "eslint --fix --ext .ts,.tsx,.vue src --quiet",
"prettier": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\""
第4步:
安装eslint-plugin-vue
yarn add eslint-plugin-vue -D
第5步:
安装prettier
yarn add add prettier -D
第6步:
在根文件夹创建 .prettierrc.js文件
第7步:
安装eslint-config-prettier
yarn add eslint-config-prettier -D
第8步:
安装eslint-plugin-prettier
yarn add eslint-plugin-prettier -D
第9步:
在.eslintrc.js文件中粘贴下面代码
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended" //放最后面 eslint-config-prettier插件用来禁止eslint中所有格式规则
],
parser: "vue-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
ecmaVersion: "latest",
sourceType: "module"
},
plugins: ["vue", "@typescript-eslint"],
rules: {}
};
第10步:
在.prettierrc.js文件中粘贴下面代码
module.exports = {
singleQuote: false, // 使用双引号
semi: true, // 末尾添加分号 var a=1
tabWidth: 2, //tab代码2个空格
trailingComma: "none", // {a:1,}是否使用尾逗号,有三个可选值"<none|es5|all>
useTabs: false,
endOfLine: "auto",
bracketSpacing: true //对象括号里是否有空格,默认为true,效果:{ foo: bar }
};
第11步:
在vscode插件中,安装eslint插件,安装prettier插件
第12步:
点击vscode的设置
第13步:
点击控制面板
第14步:
输入Preferences:Open Workspace Settings(JSON),为项目新建 .vscode/settings.json 文件
第15步:
粘贴下面的代码
{
//下面是eslint的设置
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true
},
//下面是prettier的设置
"editor.formatOnPaste": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"//将prettier设置为默认格式化工具
}
第16步:
关闭vscode , 重新启动vscode,这样就全设置好了,html标签,script里的代码,style里的代码都会在保存时格式化