vue3x 用 js 开发vue项目实现按照 eslint 规范

1. 使用 vscode 编辑器安装 Eslint 和 Prettier - code fromatter 插件

ctrl + shift + x; // 打开插件市场并安装 Eslint 和 Prettier - code fromatter 插件

2. 在项目中安装 prettier eslint 相关依赖

npm install prettier eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-config-airbnb -D

3. 在项目根目录新建 .eslintrc.js 进行自定义配置

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: ['airbnb', 'prettier', 'plugin:vue/recommended'],
    parserOptions: {
        ecmaFeatures: {
            vue: true,
        },
        ecmaVersion: 'latest',
        sourceType: 'module',
    },
    plugins: ['prettier', 'vue'],
    rules: {},
};

4. 在项目根目录新建.prettierrc.js 进行自定义配置

module.exports = {
    semi: true,
    trailingComma: 'all',
    singleQuote: true,
    printWidth: 180,
    tabWidth: 4,
};

5. 在项目根目录新建 .eslintignore，用于指定不用 eslint 校验的文件

build/*.js
src/assets
public
dist
.DS_Store
node_modules
/dist

/tests/e2e/videos/
/tests/e2e/screenshots/

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

# Lock File
package-lock.json
yarn.lock

# autoGen
/autoGen

6. 在项目根目录新建 .prettierignore，用于指定不用 prettier 格式化的文件

README.md
.DS_Store
node_modules
/dist

/tests/e2e/videos/
/tests/e2e/screenshots/

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

# Lock File
package-lock.json
yarn.lock

# autoGen
/autoGen
/public/cdn
/public/cdnimages

7. 对项目中所有文件同时进行格式化
   在 package.json 中的 scripts 属性下添加 format 项，通过 npm run format 命令实现项目全盘格式化

"scripts": {
    "format": "prettier --write \"**/*.+(js|vue|json|css|scss)\""
},

8. 注意：vue 文件格式化文档的默认设置必须是 Prettier-code-formatter(默认值)
   不可是 Vutur 等其他格式化插件，否则会造成 npm run format 和保存时自动格式化代码格式不统一

指定vue文件默认格式化插件：在vue文件中右键 --> 使用...格式化文档 --> 切换到 Prettier-code-formatter(默认值)