关于vue.js:vue3eslintprerrier

87次阅读

共计 6470 个字符，预计需要花费 17 分钟才能阅读完成。

1、应用 vite 创立一个我的项目

执行命令: yarn create vite

? Project name: 输出你的项目名称？（如: esvue）
? Select a framework: 抉择装置的脚手架 (这里选 vue)

vanilla

vue

react

Done. Now run:

cd esvue
yarn
yarn dev
2、装置 EsLint

yarn add -D eslint
3、初始化配置 EsLint

npx eslint –init
3.1、抉择模式：(To check syntax and find problems)

You can also run this command directly using ‘npm init @eslint/config’.
? How would you like to use ESLint? …
To check syntax only

To check syntax and find problems
To check syntax, find problems, and enforce code style
3.2、抉择语言模块：(选 JavaScript modules)

? What type of modules does your project use? …

JavaScript modules (import/export)
CommonJS (require/exports)
None of these
3.3、抉择语言框架 (选 Vue.js)

? Which framework does your project use? …
React

Vue.js
None of these
3.4、是否应用 ts (视本人状况而定, 我这里不必选 No)

? Does your project use TypeScript? » No / Yes
3.5 代码在哪里运行 (用空格选中 Browser+Node)

? Where does your code run? … (Press <space> to select, to toggle all, to invert selection)
√ Browser
√ Node
3.6、您心愿您的配置文件是什么格局? (选 JavaScript)

? What format do you want your config file to be in? …

JavaScript
YAML
JSON
3.7、您想当初装置它们吗? (抉择 Yes)

? Would you like to install them now? » No / Yes
3.8、您要应用哪个软件包管理器？(抉择 yarn)

? Which package manager do you want to use? …
npm

yarn
pnpm
4、装置实现后 (在我的项目根目录会呈现.eslintrc.js 文件)

// .eslintrc.js 文件
// 这里就是下面 3 步骤初始化的文件, 前面的配置都写这里
module.exports = {
env: {

browser: true,
es2021: true,
node: true

},
extends: “eslint:recommended”,
parserOptions: {

ecmaVersion: 'latest',
sourceType: 'module'

},
rules: {
}
}
5、持续装置 vite-plugin-eslint

// 阐明: 该包是用于配置 vite 运行的时候自动检测 eslint 标准
// 问题: 不装这个包能够吗? 答案是“能够的”, 应用 yarn dev 时并不会被动查看代码

yarn add -D vite-plugin-eslint
6、持续装置 eslint-parser

yarn add -D @babel/core
yarn add -D @babel/eslint-parser
7、持续装置 prettier (用于标准代码格局, 不须要能够不装)

yarn add -D prettier
yarn add -D eslint-config-prettier // eslint 兼容的插件
yarn add -D eslint-plugin-prettier // eslint 的 prettier
8、配置 vite.config.js

import {defineConfig} from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import eslintPlugin from ‘vite-plugin-eslint’ // 导入包

export default defineConfig({
plugins: [

vue(),
// 减少上面的配置项, 这样在运行时就能查看 eslint 标准
eslintPlugin({include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
})

]
})
9、配置 .prettierrc

如果您没有装置第 7 步骤的那三个包, 这个配置你能够疏忽跳过
这里次要配置代码的格局标准的, 有些设置要与.eslintrc.js 配置统一, 避免抵触
// 在我的项目根目录创立文件 .prettierrc
// 以下配置视本人状况而定, 并步是每个都须要的
{
tabWidth: 4, // 应用 4 个空格缩进
semi: false, // 代码结尾是否加分号
trailingComma: ‘none’, // 代码开端不须要逗号
singleQuote: true, // 是否应用单引号
printWidth: 100, // 超过多少字符强制换行
arrowParens: ‘avoid’, // 单个参数的箭头函数不加括号 x => x
bracketSpacing: true, // 对象大括号内两边是否加空格 {a:0}

endOfLine: ‘auto’, // 文件换行格局 LF/CRLF
useTabs: false, // 不应用缩进符, 而应用空格
quoteProps: ‘as-needed’, // 对象的 key 仅在必要时用引号
jsxSingleQuote: false, // jsx 不应用单引号, 而应用双引号
jsxBracketSameLine: false, // jsx 标签的反尖括号须要换行
rangeStart: 0, // 每个文件格式化的范畴是文件的全部内容
rangeEnd: Infinity, // 结尾
requirePragma: false, // 不须要写文件结尾的 @prettier
insertPragma: false, // 不须要主动在文件结尾插入 @prettier
proseWrap: ‘preserve’, // 应用默认的折行规范
htmlWhitespaceSensitivity: ‘css’ // 依据显示款式决定 html 要不要折行
}
10、配置 .eslintrc.js

module.exports = {

"env": {
    "browser": true,
    "es2021": true,
    "node": true
},
"extends": [
    "eslint:recommended",         // 应用举荐的 eslint
    'plugin:vue/vue3-recommended' // 应用插件反对 vue3
     // 如果你没有装置第 7 步, 以下两个包不要引入, 否则报错 
    'plugin:prettier/recommended', 
    'eslint-config-prettier'
],
"parserOptions": {
    "ecmaVersion": 13,
    "sourceType": "module",
    "ecmaFeatures": {
        "modules": true,
        'jsx': true
    },
    "requireConfigFile": false,
    "parser": '@babel/eslint-parser'
},
// eslint-plugin-vue 
'plugins': [
    'vue'      // 引入 vue 的插件 vue <==> eslint-plugin-vue 
    // 这个包须要装置了第 7 步的三个包再引入
    'prettier' // 引入标准插件  prettier <==>  eslint-plugin-prettier
],
'globals': {
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineExpose: 'readonly',
    withDefaults: 'readonly'
},
// 这里时配置规定的, 本人看状况配置
"rules": {'semi': ['warn', 'never'],           // 禁止尾部应用分号
    'no-console': 'warn',                // 禁止呈现 console
    'no-debugger': 'warn',               // 禁止呈现 debugger
    'no-duplicate-case': 'warn',         // 禁止呈现反复 case
    'no-empty': 'warn',                  // 禁止呈现空语句块
    'no-extra-parens': 'warn',           // 禁止不必要的括号
    'no-func-assign': 'warn',            // 禁止对 Function 申明从新赋值
    'no-unreachable': 'warn',            // 禁止呈现 [return|throw] 之后的代码块
    'no-else-return': 'warn',            // 禁止 if 语句中 return 语句之后有 else 块
    'no-empty-function': 'warn',         // 禁止呈现空的函数块
    'no-lone-blocks': 'warn',            // 禁用不必要的嵌套块
    'no-multi-spaces': 'warn',           // 禁止应用多个空格
    'no-redeclare': 'warn',              // 禁止屡次申明同一变量
    'no-return-assign': 'warn',          // 禁止在 return 语句中应用赋值语句
    'no-return-await': 'warn',           // 禁用不必要的[return/await]
    'no-self-compare': 'warn',           // 禁止本身比拟表达式
    'no-useless-catch': 'warn',          // 禁止不必要的 catch 子句
    'no-useless-return': 'warn',         // 禁止不必要的 return 语句
    'no-mixed-spaces-and-tabs': 'warn',  // 禁止空格和 tab 的混合缩进
    'no-multiple-empty-lines': 'warn',   // 禁止呈现多行空行
    'no-trailing-spaces': 'warn',        // 禁止一行完结前面不要有空格
    'no-useless-call': 'warn',           // 禁止不必要的.call()和.apply()
    'no-var': 'warn',                    // 禁止呈现 var 用 let 和 const 代替
    'no-delete-var': 'off',              // 容许呈现 delete 变量的应用
    'no-shadow': 'off',                  // 容许变量申明与外层作用域的变量同名
    'dot-notation': 'warn',              // 要求尽可能地应用点号
    'default-case': 'warn',              // 要求 switch 语句中有 default 分支
    'eqeqeq': 'warn',                    // 要求应用 === 和 !==
    'curly': 'warn',                     // 要求所有管制语句应用统一的括号格调
    'space-before-blocks': 'warn',       // 要求在块之前应用统一的空格
    'space-in-parens': 'warn',           // 要求在圆括号内应用统一的空格
    'space-infix-ops': 'warn',           // 要求操作符四周有空格
    'space-unary-ops': 'warn',           // 要求在一元操作符前后应用统一的空格
    'switch-colon-spacing': 'warn',      // 要求在 switch 的冒号左右有空格
    'arrow-spacing': 'warn',             // 要求箭头函数的箭头前后应用统一的空格
    'array-bracket-spacing': 'warn',     // 要求数组方括号中应用统一的空格
    'brace-style': 'warn',               // 要求在代码块中应用统一的大括号格调
    'camelcase': 'warn',                 // 要求应用骆驼拼写法命名约定
    'indent': ['warn', 4],               // 要求应用 JS 统一缩进 4 个空格
    'max-depth': ['warn', 4],            // 要求可嵌套的块的最大深度 4
    'max-statements': ['warn', 100],     // 要求函数块最多容许的的语句数量 20
    'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度 3
    'max-statements-per-line': ['warn', { max: 1}],   // 要求每一行中所容许的最大语句数量
    "quotes": ["warn", "single", "avoid-escape"],      // 要求对立应用单引号符号
    "vue/require-default-prop": 0,                     // 敞开属性参数必须默认值
    "vue/singleline-html-element-content-newline": 0,  // 敞开单行元素必须换行符
    "vue/multiline-html-element-content-newline": 0,   // 敞开多行元素必须换行符
    // 要求每一行标签的最大属性不超五个
    'vue/max-attributes-per-line': ['warn', { singleline: 5}],
    // 要求 html 标签的缩进为须要 4 个空格
    "vue/html-indent": ["warn", 4, {
        "attribute": 1,
        "baseIndent": 1,
        "closeBracket": 0,
        "alignAttributesVertically": true,
        "ignores": []}],
    // 勾销敞开标签不能自闭合的限度设置
    "vue/html-self-closing": ["error", {              
        "html": {
            "void": "always",
            "normal": "never",
            "component": "always"
        },
        "svg": "always",
        "math": "always"
    }]   
}

}
11、配置 VScode

1、装置“ESLint”插件【作者: Microsoft】
2、装置“Prettier ESLint”插件【作者：Rebecca Vest】
// 配置 vscode
// 关上：设置 -> 文本编辑器 -> 字体 -> 在 settings.json 中编辑

// settings.json 文件
{
// vscode 默认启用了依据文件类型主动设置 tabsize 的选项
“editor.detectIndentation”: false,
// 从新设定 tabsize
“editor.tabSize”: 2,
// 每次保留的时候主动格式化
“editor.formatOnSave”: true,
// 每次保留的时候将代码按 eslint 格局进行修复
“eslint.autoFixOnSave”: true,
// 增加 vue 反对
“eslint.validate”: [

  "javascript",
  "javascriptreact",
  {
       "language": "vue",
       "autoFix": true
  }

],
// #让 prettier 应用 eslint 的代码格局进行校验
“prettier.eslintIntegration”: true
}
12、其它 (整个流程下来装置的包)

“devDependencies”: {

// eslint 解析相干的包
"@babel/core": "^7.18.2",
"@babel/eslint-parser": "^7.18.2",

// eslint 相干的包
"eslint": "^8.17.0",
"eslint-plugin-vue": "^9.1.0",
"vue-eslint-parser": "^9.0.2",
"vite-plugin-eslint": "^1.6.1",

// prettier 相干的包
"prettier": "^2.6.2",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.0.0",

}

正文完
vue.js
发表至： vue.js
2023-09-12
 0
关于vue.js:Vuejs-独立构建和运行时构建的区别
关于vue.js:Vuejs源码全方位深入解析-含Vue30源码分析
关于vue.js:axios模块化封装实例化和vue本地解决跨域
关于vue.js:听说你很了解-Vue3-响应式