eslint 学习
eslint演示
- 初始化项目：
npm init -y - 创建入口文件：
index.js - 下载eslint：
npm i -g eslint - 初始化eslint：
npx eslint --init - 检测
index.js：eslint index.js - 修复
index.js：eslint index.js --fix
npm包能够修复，但都是执行完后进行。
vscode的eslint插件就可以一边编写，一边提示和修复。但无法修复代码格式
prettier演示
-
还是使用上面的项目
-
下载
prettier：npm i -D prettier -
修复
index.js：npm prettier --write index.js不像eslint只能处理js/ts文件，prettier还可以处理其他文件
-
创建
.prettierrc的json文件{ "semi": false, "singleQuote": true, } -
vscode的eslint插件也可以配置，但
.prettierrc.js的权限大于本地的setting配置权限 -
prettier部分配置会和eslint出现冲突，注意解决
-
prettier对应的vscode配置详情
{ // 使能每一种语言默认格式化规则 // 后面可以扩展vue，ts等等，也可以不设置文件默认格式化插件 "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, } -
prettier规则中文对照
{ "printWidth": 80, // 超过最大值换行，默认一行80字符 "tabWidth": 4, // 缩进字节数 "useTabs": false, // 缩进不使用tab，使用空格 "semi": true, // 句尾添加分号 "singleQuote": true, // 使用单引号代替双引号 "quoteProps": "as-needed", // 对象引入按需加引号，默认as-needed "jsxSingleQuote": false, // 在jsx中使用单引号代替双引号 "trailingComma": "all", // 在对象或数组最后一个元素后面是否加逗号（全部追加） "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }" "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行 "arrowParens": "always", // 箭头函数参数只有一个时是否要有小括号，默认always "parser": "babylon", // 格式化的解析器，默认babylon "proseWrap": "preserve", // 默认preserve。 "htmlWhitespaceSensitivity": "ignore", // 忽视html的空白 "vueIndentScriptAndStyle": true, // 缩进vue样式标签和脚本代码 "endOfLine": "crlf", // 结尾是 \n \r \n\r auto "ignorePath": ".prettierignore", // 默认.prettierignore "stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验 "tslintIntegration": false, // 不让prettier使用tslint的代码格式进行校验 "requireConfig": false, // Require a 'prettierconfig' to format prettier }
vscode配置
主要针对 – 工作区vscode的setting.json配置
{
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
// 保存文件时自动格式化代码
"http.proxyAuthorization": "false",
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
},
// 解析vite定义的别名
}
js-eslint配置
-
下载eslint：
npm i -D eslint -
初始化eslint：
npx eslint --init -
下载安装：
npm install -D --save-exact prettier npm install -D eslint-plugin-prettier eslint-config-prettier -
项目根目录创建
.prettierrc文件{ "semi": false, "singleQuote": true, "trailingComma": "es5", "endOfLine": "auto" } -
配置生成的
.eslint.js文件... extends: ['standard', 'plugin:prettier/recommended'], ... -
基础
plugin:prettier/recommended，就可以把prettier错误抛出，且和eslint不冲突。
ts-eslint配置
-
下载typescript：
npm i -S-D typescript -
初始化ts配置：
tsc --init -
下载eslint：
npm i -D eslint -
初始化eslint：
npx eslint --init -
下载安装：
npm install -D --save-exact prettier npm install -D eslint-plugin-prettier eslint-config-prettier -
项目根目录创建
.prettierrc文件{ "semi": false, "singleQuote": true, "trailingComma": "es5", "endOfLine": "auto" } -
配置
.eslint.js里面的插件都不需要下载，初始化eslint配置时就安装好了
// 和上面一样 extends: [ 'standard-with-typescript', 'plugin:prettier/recommended' ], // 配置ts解析 parserOptions: { ecmaVersion: 'latest', sourceType: 'module', parser: '@typescript-eslint/parser', project: './tsconfig.json', }, // 引入ts的eslint插件 plugins: ['@typescript-eslint'],
vue-手动-eslint
-
初始化vue项目(官网)：
npm init vue@latest -
下载依赖：
npm i -
下载eslint：
npm i -D eslint -
初始化eslint：
npx eslint --init -
下载安装：
// 处理prettier插件 npm install -D --save-exact prettier npm install -D eslint-plugin-prettier eslint-config-prettier // 解析ts的插件 npm install -D @vue/eslint-config-typescript -
项目根目录创建
.prettierrc文件{ "semi": false, "singleQuote": true, "trailingComma": "es5", "endOfLine": "auto" } -
配置
.eslint.js... extends: [ ..., '@vue/eslint-config-typescript/recommended', // 解析vue-ts文件 'plugin:prettier/recommended', // 必须最后一行写 ], parserOptions: { ..., project: ['./tsconfig.app.json', './tsconfig.config.json'], // vue3把tsconfig分成好几个，这两个需要引入解析 // 具体内容查看tsconfig的refrence // https://zhuanlan.zhihu.com/p/402362978 // 这个咱也不是多很懂，目前这样用了，希望大佬批评指点 } ... -
下载运行提示：
npm i -D vite-plugin-eslint @types/node -
修改配置
vite.config.tsimport eslintPlugin from 'vite-plugin-eslint' ... plugins: [ vue(), eslintPlugin({ include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'], exclude: ['./node_modules/**'], cache: false, }), ],
vue-cli-eslint
-
初始化vue项目(官网)：
npm init vue@latest -
下载依赖：
npm i -
项目根目录创建
.prettierrc文件{ "semi": false, "singleQuote": true, "trailingComma": "es5", "endOfLine": "auto" } -
下载运行提示：
npm i -D vite-plugin-eslint @types/node -
修改配置
vite.config.tsimport eslintPlugin from 'vite-plugin-eslint' ... plugins: [ vue(), eslintPlugin({ include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'], exclude: ['./node_modules/**'], cache: false, }), ],
uniApp-vue3-vite
-
初始化uni-app项目(官网)：
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project -
下载依赖：
npm i -
下载eslint：
npm i -D eslint -
初始化eslint：
npx eslint --init -
下载安装：
// 处理prettier插件 npm install -D --save-exact prettier npm install -D eslint-plugin-prettier eslint-config-prettier // 解析ts的插件 npm install -D @vue/eslint-config-typescript -
项目根目录创建
.prettierrc文件{ "semi": false, "singleQuote": true, "trailingComma": "es5", "endOfLine": "auto" } -
配置并改写多个
tsconfig.js-
tscondig.json{ "files": [], "references": [ { "path": "./tsconfig.config.json" }, { "path": "./tsconfig.app.json" }, ] } -
tsconfig.extend.json{ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "importsNotUsedAsValues": "error", "isolatedModules": true, "module": "esnext", "moduleResolution": "node", "noImplicitThis": true, "preserveValueImports": true, "forceConsistentCasingInFileNames": true, "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": true } } -
tsconfig.app.json{ "extends": "./tsconfig.extend.json", "include": ["env.d.ts", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "exclude": ["src/**/__tests__/*"], "compilerOptions": { "composite": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "lib": ["esnext", "dom"], "types": ["@dcloudio/types"] } } -
tsconfig.config.json{ "extends": "./tsconfig.extend.json", "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"], "compilerOptions": { "composite": true, "types": ["node"], "lib": [], } }
-
-
配置
.eslint.js... extends: [ ..., '@vue/eslint-config-typescript/recommended', // 解析vue-ts文件 'plugin:prettier/recommended', // 必须最后一行写 ], parserOptions: { ..., project: ['./tsconfig.app.json', './tsconfig.config.json'], } ... -
下载运行提示：
npm i -D vite-plugin-eslint @types/node -
修改配置
vite.config.tsimport eslintPlugin from 'vite-plugin-eslint' ... plugins: [ vue(), eslintPlugin({ include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'], exclude: ['./node_modules/**'], cache: false, }), ],
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
