添加 .editorconfig 文件
# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
添加 ESLint
- 安裝依賴
npm add -D eslint vite-plugin-eslint @babel/core @babel/eslint-parser
- 根目錄創建
.eslintrc.cjs
module.exports = {
"root":true,
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
'eslint-config-prettier',
"eslint:recommended", // 使用推薦的eslint
"plugin:@typescript-eslint/recommended",
"plugin:vue/vue3-essential",
'plugin:vue/vue3-essential',
//1.繼承.prettierrc.js文件規則 2.開啓rules的 "prettier/prettier": "error" 3.eslint fix的同時執行prettier格式化
'plugin:prettier/recommended',
],
"parser": 'vue-eslint-parser',
"parserOptions": {
"ecmaVersion": "latest",
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint",
"vue"
],
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly',
},
"rules": {
}
};
- 配置
vite.config.ts文件
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
eslintPlugin({
include: ['src/**/*.ts', 'src/**/*.vue', 'src/*.ts', 'src/*.vue'],
}),
],
// 其他配置 ......
});
- webstorm 開啓 eslint
如果是vscode, 則需要安裝 ESLint插件
安裝 Prettier
- 安裝依賴
npm add -D prettier
npm add -D eslint-config-prettier #eslint兼容的插件
npm add -D eslint-plugin-prettier #eslint的prettier
- 根目錄添加
.prettierrc.cjs文件
在根目錄下面添加.prettierrc.js文件夾，然後將下面的配置添加到其中。如果不想格式化某些文件可以再添加一個.prettierignore的文件，用法和.gitignore文件差不多，將不需要格式化的文件夾或文件通過正則匹配或者具名的方式添加進去，這樣就不會格式化對應的文件了。
// .prettierrc.js
module.exports = {
// 一行最多多少個字符
printWidth: 120,
// 指定每個縮進級別的空格數
tabWidth: 4,
// 使用製表符而不是空格縮進行
useTabs: true,
// 在語句末尾是否需要分號
semi: true,
// 是否使用單引號
singleQuote: true,
// 更改引用對象屬性的時間 可選值"<as-needed|consistent|preserve>"
quoteProps: 'as-needed',
// 在JSX中使用單引號而不是雙引號
jsxSingleQuote: false,
// 多行時儘可能打印尾隨逗號。（例如，單行數組永遠不會出現逗號結尾。） 可選值"<none|es5|all>"，默認none
trailingComma: 'none',
// 在對象文字中的括號之間打印空格
bracketSpacing: true,
// jsx 標籤的反尖括號需要換行
jsxBracketSameLine: false,
// 在單獨的箭頭函數參數周圍包括括號 always：(x) => x \ avoid：x => x
arrowParens: 'avoid',
// 這兩個選項可用於格式化以給定字符偏移量（分別包括和不包括）開始和結束的代碼
rangeStart: 0,
rangeEnd: Infinity,
// 指定要使用的解析器，不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動在文件開頭插入 @prettier
insertPragma: false,
// 使用默認的折行標準 always\never\preserve
proseWrap: 'preserve',
// 指定HTML文件的全局空格敏感度 css\strict\ignore
htmlWhitespaceSensitivity: 'css',
// Vue文件腳本和樣式標籤縮進
vueIndentScriptAndStyle: true,
//在 windows 操作系統中換行符通常是回車 (CR) 加換行分隔符 (LF)，也就是回車換行(CRLF)，
//然而在 Linux 和 Unix 中只使用簡單的換行分隔符 (LF)。
//對應的控制字符爲 "\n" (LF) 和 "\r\n"(CRLF)。auto意爲保持現有的行尾
// 換行符使用 lf 結尾是 可選值"<auto|lf|crlf|cr>"
endOfLine: 'auto',
// 將>多行 HTML（HTML、JSX、Vue、Angular）元素放在最後一行的末尾，而不是單獨放在下一行（不適用於自閉合元素
bracketSameLine:false
};
- webstorm 開啓 prettierrc
VsCode需要安裝prettier插件
