认识ESLint
使用ESLint
- npm install eslint -D
- npx eslint --init
- npx eslint ./src/main.js
ESLint的文件解析
VSCode的ESLint插件
VSCode的Prettier插件
ESLint-Loader的使用
- cnpm install eslint-loader -D
wk.config.js
| const path = require('path'); |
| const { CleanWebpackPlugin } = require('clean-webpack-plugin'); |
| const HtmlWebpackPlugin = require('html-webpack-plugin'); |
| |
| module.exports = { |
| mode: 'development', |
| entry: './src/index.js', |
| devtool: 'source-map', |
| output: { |
| filename: 'js/bundle.js', |
| |
| path: path.resolve(__dirname, './build'), |
| |
| }, |
| module: { |
| rules: [ |
| { |
| test: /\.jsx?$/, |
| exclude: /node_modules/, |
| |
| use: ['babel-loader', 'eslint-loader'], |
| }, |
| { |
| test: /\.ts$/, |
| exclude: /node_modules/, |
| |
| use: 'babel-loader', |
| }, |
| ], |
| }, |
| plugins: [ |
| new CleanWebpackPlugin(), |
| new HtmlWebpackPlugin({ |
| title: 'haha webpack', |
| template: './index.html', |
| }), |
| ], |
| }; |
.eslintrc.js
| module.exports = { |
| env: { |
| browser: true, |
| commonjs: true, |
| es2021: true, |
| }, |
| extends: ['plugin:vue/essential', 'airbnb-base'], |
| parserOptions: { |
| ecmaVersion: 12, |
| parser: '@typescript-eslint/parser', |
| }, |
| plugins: ['vue', '@typescript-eslint'], |
| rules: { |
| |
| |
| |
| 'no-unused-vars': 0, |
| quotes: ['warn', 'single'], |
| 'no-console': 0, |
| 'import/no-extraneous-dependencies': 0, |
| }, |
| }; |
.prettierrc
| { |
| "printWidth": 100, |
| "singleQuote": true |
| } |
加载Vue文件
Webpack中配置vue加载
- cnpm install vue-loader -D
- npm install vue-template-compiler -D
wk.config.js
| const path = require('path'); |
| const { CleanWebpackPlugin } = require('clean-webpack-plugin'); |
| const HtmlWebpackPlugin = require('html-webpack-plugin'); |
| const VueLoaderPlugin = require('vue-loader/lib/plugin'); |
| |
| module.exports = { |
| mode: "development", |
| entry: "./src/index.js", |
| devtool: "source-map", |
| output: { |
| filename: "js/bundle.js", |
| |
| path: path.resolve(__dirname, "./build"), |
| |
| }, |
| module: { |
| rules: [ |
| { |
| test: /\.less$/, |
| use: [ |
| "style-loader", |
| { |
| loader: "css-loader", |
| options: { |
| importLoaders: 2 |
| } |
| }, |
| "postcss-loader", |
| "less-loader" |
| ] |
| }, |
| { |
| test: /\.jsx?$/, |
| exclude: /node_modules/, |
| use: { |
| loader: "babel-loader", |
| } |
| }, |
| { |
| test: /\.ts$/, |
| exclude: /node_modules/, |
| |
| use: "babel-loader" |
| }, |
| { |
| test: /\.vue$/, |
| use: "vue-loader" |
| } |
| ] |
| }, |
| plugins: [ |
| new CleanWebpackPlugin(), |
| new HtmlWebpackPlugin({ |
| title: "haha webpack", |
| template: "./index.html" |
| }), |
| new VueLoaderPlugin() |
| ] |
| } |
| |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步