初衷: 在没有固定的项目模版之前；每次新建项目之后配置代码风格都需要来回粘贴；并且有时候粘贴了也不生效；故总结成文档；方便之后直接使用
介绍
- 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
}
完结
保存即可自动格式；如不生效；重启编译器～