?第1步：
安裝eslint
yarn add eslint -D?第2步：
在根文件夾中，創(chuàng)建.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步：
在根文件夾創(chuàng)建 .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中所有格式規(guī)則
],
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的設(shè)置
第13步：
點擊控制面板
第14步：
輸入Preferences:Open Workspace Settings(JSON)，為項目新建 .vscode/settings.json 文件
第15步：
粘貼下面的代碼
{
//下面是eslint的設(shè)置
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true
},
//下面是prettier的設(shè)置
"editor.formatOnPaste": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"http://將prettier設(shè)置為默認格式化工具
}
?第16步：文章來源：http://www.zghlxwxcb.cn/news/detail-754401.html
關(guān)閉vscode , 重新啟動vscode,這樣就全設(shè)置好了，html標簽，script里的代碼，style里的代碼都會在保存時格式化文章來源地址http://www.zghlxwxcb.cn/news/detail-754401.html
到了這里，關(guān)于vue3安裝eslint和prettier，最簡單的步驟的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
