参考资料
- Prettier官网
- EsLint官网
- EsLint Rules
- vue3 + ts + EsLint + Prettier 规范代码
- VSCode中ESLint、Prettier 配置冲突问题原因及解决方案
项目配置
1.1 初始化
npm init @vitejs/app my-vue-app -- --template vue-ts
1.2 配置eslint
1.2.1 安装
npm i -D eslint
1.2.2 配置
npx eslint --init
选择配置项
✔ How would you like to use ESLint? · problems ---选择To check syntax and find problems
✔ What type of modules does your project use? · esm ---选择JavaScript modules (import/export)
✔ Which framework does your project use? · vue ---选择Vue.js
✔ Does your project use TypeScript? · No / Yes ---选择Yes
✔ Where does your code run? · browser, node ---多选Browser Node
✔ What format do you want your config file to be in? · JavaScript ---选择JavaScript
The config that you've selected requires the following dependencies:
eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes ---选择Yes,开始安装依赖,并创建.eslintrc.js
配置规则~/.eslintrc.js
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
// "plugin:vue/essential", // ↓ 修改为 plugin:vue/vue3-essential ↓
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended"
],
"parser": 'vue-eslint-parser', // 新增
"parserOptions": {
"ecmaVersion": 13,
"parser": "@typescript-eslint/parser",
"sourceType": "module"
},
"plugins": ['vue', '@typescript-eslint'],
"rules": {}
};
1.2.3 eslint忽略配置文件~/.eslintignore
#ESLint忽略指定文件或目录
index.html
1.3 配置Prettier(2种方式)
安装依赖
npm i -D prettier eslint-config-prettier eslint-plugin-prettier
1.3.1 使用Prettier推荐配置
vscode编辑器设置
// ~/.vscode/settings.json
{
"editor.formatOnSave": false, // 编辑器保存时自动格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // 保存时使用eslint校验文件(会使用eslint规则自动格式化)
}
}
eslint配置文件
// ~/.eslintrc.js
module.exports = {
...
extends: [
...
'plugin:prettier/recommended' // 使用prettier推荐配置
],
...
rules: {
...
'prettier/prettier': [
'error',
{
// 覆盖prettier推荐配置,需要写在这里
printWidth: 120,
tabWidth: 4,
}
],
"@typescript-eslint/ban-ts-comment": "off", // ts忽略报错消除
},
globals: {
defineProps: "readonly",
defineEmits: "readonly",
defineExpose: "readonly",
},
};
1.3.2 使用自定义的Prettier配置
vscode编辑器设置
// ~/.vscode/settings.json
{
"editor.formatOnSave": true, // 编辑器保存时自动格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // 保存时使用eslint校验文件
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" // 使用Prettier插件来美化代码
}
}
- 添加配置文件
~/.prettierrc.js
module.exports = {
printWidth: 120, // 换行字符串阈值
tabWidth: 2, // 设置工具每一个水平缩进的空格数
useTabs: false,
semi: false, // 句末是否加分号
vueIndentScriptAndStyle: true,
singleQuote: true, // 用单引号
trailingComma: 'none', // 最后一个对象元素加逗号
bracketSpacing: true, // 对象，数组加空格
jsxBracketSameLine: true, // jsx > 是否另起一行
arrowParens: 'always', // (x) => {} 是否要有小括号
requirePragma: false, // 不需要写文件开头的 @prettier
insertPragma: false // 不需要自动在文件开头插入 @prettier
}
- 将Prettier添加到EsLint中
修改.eslintrc.js文件，在extends中增加
module.exports = {
...
extends: [
...
"prettier" // 放到最后,自定义的Prettier会覆盖前面的配置,不会报错
],
...
1.4 配置stylelint
安装依赖
npm i -D stylelint
配置stylelint.config.js;
插件和继承的配置都是npm包,按需安装并引入
安装配置依赖
npm i -D stylelint-order stylelint-scss stylelint-prettier stylelint-config-standard postcss-html stylelint-config-recommended-vue stylelint-config-recess-order stylelint-config-recommended-scss
// ~/stylelint.config.js
module.exports = {
// stylelint-order 的作用是强制你按照某个顺序编写 css ;
// stylelint-scss scss语法规范插件
plugins: ["stylelint-order", "stylelint-scss", "stylelint-prettier"],
extends: [
"stylelint-config-standard", // Stylelint 标准配置
"stylelint-config-recommended", // Stylelint 推荐配置,兼容 prettier
"stylelint-config-html", // postcss-html 支持.html文件配置
"stylelint-config-recommended-vue", // postcss-html 支持.vue文件推荐配置
"stylelint-config-recommended-vue/scss",
"stylelint-config-recess-order", // stylelint-order 插件的第三方配置,自动调整顺序
],
rules: {
"at-rule-no-unknown": null, // scss规范插件推荐规则
"scss/at-rule-no-unknown": true, // scss规范插件推荐规则
indentation: 4, // css代码缩进4格
"unit-case": null,
"no-duplicate-selectors": null,
"selector-class-pattern": /^[a-z-_]+$/,
}
};
"stylelint-config-html" "stylelint-config-recommended-vue" "stylelint-config-recommended-vue/scss"这三个依赖于postcss-html,所以要安装它
vscode安装插件vscode-stylelint
插件扩展配置
// ~/.vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true // 保存时stylelint格式化
},
// 禁用编辑器内置lint
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.enable": true, // 启用stylelint
"stylelint.validate": ["css", "scss", "vue"] // 插件默认只检测 css postcss文件
}
