前言
本文基于
- “vite”: “^5.0.0”
1.安裝依賴
安裝 eslint
yarn add eslint --dev
安裝 eslint-plugin-vue
yarn add eslint-plugin-vue --dev
主要用于檢查 Vue 文件語法
安裝 prettier 及相關(guān)插件
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev
安裝 typescript 解析器、規(guī)則補(bǔ)充
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev
2.根目錄創(chuàng)建 .eslintrc.cjs
module.exports = {
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'eslint-config-prettier',
'plugin:prettier/recommended'
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser'
},
plugins: ['vue', 'prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
}
};
3.根目錄創(chuàng)建 .prettierrc.cjs
module.exports = {
// 字符串是否使用單引號(hào)
singleQuote: true,
// 大括號(hào)首尾是否需要空格
bracketSpacing: true,
// 對(duì)象末尾是否需要逗號(hào)
trailingComma: 'none',
// 箭頭函數(shù)參數(shù)括號(hào)(1個(gè)參數(shù)不需要, 1個(gè)以上需要)
arrowParens: 'avoid',
// 折行標(biāo)準(zhǔn)(默認(rèn))
proseWrap: 'preserve',
// 根據(jù)顯示樣式?jīng)Q定html是否折行
htmlWhitespaceSensitivity: 'css',
// 換行符(crlf/lf/auto)
endOfLine: 'auto'
};
4.配置 package.json 的 scripts 字段
"scripts": {
...
"lint": "eslint . --ext vue,ts --report-unused-disable-directives --max-warnings 0"
}
5.測(cè)試配置
yarn lint
如果本篇文章對(duì)你有幫助的話，很高興能夠幫助上你。文章來源：http://www.zghlxwxcb.cn/news/detail-792771.html
當(dāng)然，如果你覺得文章有什么讓你覺得不合理、或者有更簡單的實(shí)現(xiàn)方法又或者有理解不來的地方，希望你在看到之后能夠在評(píng)論里指出來，我會(huì)在看到之后盡快的回復(fù)你。文章來源地址http://www.zghlxwxcb.cn/news/detail-792771.html
到了這里，關(guān)于Vue typescript項(xiàng)目配置eslint+prettier的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
