共计 2292 个字符，预计需要花费 6 分钟才能阅读完成。
初衷: 在没有固定的我的项目模版之前；每次新建我的项目之后配置代码格调都须要来回粘贴；并且有时候粘贴了也不失效；故总结成文档；不便之后间接应用
介绍
- ESLint 是 JavaScript 和 JSX 查看工具
- prettier 代码格式化工具
装置依赖
# 装置 eslint
npm install --save-dev eslint eslint-plugin-vue
#装置 prettier
npm install --save-dev prettier eslint-plugin-prettier @vue/eslint-config-prettier
#装置 typescript 反对
npm install --save-dev @vue/eslint-config-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
配置文件
- 根目录新建
.eslintrc.js文件
module.exports = {
root: true,
env: {
browser: true,
// 必填
node: true,
es2021: true
},
parser: 'vue-eslint-parser',
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
// eslint-config-prettier 的缩写
'prettier'
],
parserOptions: {
ecmaVersion: 12,
parser: '@typescript-eslint/parser',
sourceType: 'module',
ecmaFeatures: {jsx: true}
},
// eslint-plugin-vue @typescript-eslint/eslint-plugin eslint-plugin-prettier 的缩写
plugins: ['vue', '@typescript-eslint', 'prettier'],
rules: {
'prettier/prettier': [
'error',
{
singleQuote: true,
semi: false,
trailingComma: 'none',
arrowParens: 'avoid',
printWidth: 160
}
],
'no-undef': 'off',
'vue/multi-word-component-names': [
'error',
{ignores: []
}
],
'vue/v-on-event-hyphenation': 0 // html 上的事件容许驼峰格局 phoneCallback
},
globals: {
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly'
}
}
- 根目录新建
.eslintignore配置疏忽文件
.vscode
.idea
.local
index.html
!.env-config.ts
components.d.ts
/node_modules/
/public/
- 根目录新建
.prettierrc.js
module.exports = {
printWidth: 160, // 单行输入（不折行）的（最大）长度
tabWidth: 2, // 每个缩进级别的空格数
tabs: false, // 应用制表符 (tab) 缩进行而不是空格 (space)
semi: false, // 是否在语句开端打印分号
singleQuote: true, // 是否应用单引号
quoteProps: 'as-needed', // 仅在须要时在对象属性四周增加引号
bracketSpacing: true, // 是否在对象属性增加空格
htmlWhitespaceSensitivity: 'ignore', // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的
trailingComma: 'none', // 去除对象最开端元素追随的逗号
useTabs: false, // 不应用缩进符，而应用空格
jsxSingleQuote: false, // jsx 不应用单引号，而应用双引号
// arrowParens: 'always', // 箭头函数，只有一个参数的时候，也须要括号
rangeStart: 0, // 每个文件格式化的范畴是文件的全部内容
proseWrap: 'always', // 当超出 print width（下面有这个参数）时就折行
endOfLine: 'lf', // 换行符应用 lf
"max-lines-per-function": [2, { max: 320, skipComments: true, skipBlankLines: true}, ] // 每个函数最大行数
}
vscode 保留并主动格式化
- 装置编译器
ESLint 插件 - 批改
vscode配置
{
"editor.formatOnSave": true, // 1
"editor.codeActionsOnSave": {"source.fixAll.eslint": true},
"eslint.format.enable": true
}
完结
保留即可主动格局；如不失效；重启编译器～
正文完
